:root {
  --white: oklch(100% 0 0);
  --cream: oklch(98.84% 0.0138 88.68);
  --gray-200: oklch(91.58% 0 0);
  --gray-500: oklch(60% 0 0);
  --gray-600: oklch(46.4% 0 0);
  --gray-700: oklch(36% 0 0);
  --gray-950: oklch(16.38% 0 0);
  --purple-50: oklch(96.04% 0.0191 320.56);
  --purple-100: oklch(92.29% 0.06 321.71);
  --purple-200: oklch(85.7% 0.1154 321.15);
  --purple-300: oklch(79.22% 0.172 321.39);
  --purple-700: oklch(39.72% 0.1888 320.28);
  --purple-800: oklch(31.91% 0.1515 320.53);
  --purple-950: oklch(17.83% 0.0812 321.08);
  --amber-500: oklch(76.43% 0.1589 78.8);
  --amber-600: oklch(64% 0.13 72);
  --red-50: oklch(95.63% 0.0186 21.57);
  --red-700: oklch(50.13% 0.1783 28.7);
  --red-800: oklch(42% 0.1473 28.14);
  --mauve-100: oklch(95% 0.008 320);
  --mauve-200: oklch(90% 0.012 320);
  --mauve-400: oklch(78% 0.018 320);
  --mauve-500: oklch(60% 0.022 320);
  --mauve-800: oklch(30% 0.02 320);
  --mauve-900: oklch(19.5% 0.016 320);
  --mauve-950: oklch(15% 0.012 320);
  --purple-900: oklch(27% 0.085 320);
  --red-100: oklch(90% 0.045 25);
  --red-900: oklch(27% 0.07 25);

  --color-bg: light-dark(var(--cream), var(--mauve-950));
  --color-surface: light-dark(var(--white), var(--mauve-900));
  --color-surface-glass: light-dark(color-mix(in srgb, var(--white) 92%, transparent), color-mix(in srgb, var(--mauve-900) 92%, transparent));
  --color-surface-accent-subtle: light-dark(var(--purple-50), color-mix(in oklch, var(--purple-900) 50%, var(--mauve-900)));
  --color-surface-accent: light-dark(var(--purple-100), var(--purple-900));
  --color-surface-inverse: var(--purple-950);
  --color-surface-inverse-subtle: color-mix(in srgb, var(--white) 8%, transparent);
  --color-text: light-dark(var(--gray-700), var(--mauve-200));
  --color-text-strong: light-dark(var(--gray-950), var(--mauve-100));
  --color-text-muted: light-dark(var(--gray-600), var(--mauve-400));
  --color-heading: light-dark(var(--purple-950), var(--purple-100));
  --color-on-surface-accent: light-dark(var(--purple-950), var(--purple-100));
  --color-text-inverse: color-mix(in srgb, var(--white) 85%, transparent);
  --color-text-inverse-strong: var(--white);
  --color-accent: light-dark(var(--purple-700), var(--purple-200));
  --color-accent-hover: light-dark(var(--purple-800), var(--purple-100));
  --color-on-accent: light-dark(var(--white), var(--purple-950));
  --color-accent-inverse: var(--purple-300);
  --color-accent-inverse-hover: var(--purple-200);
  --color-border: light-dark(var(--gray-200), var(--mauve-800));
  --color-border-input: light-dark(var(--gray-500), var(--mauve-500));
  --color-divider: light-dark(color-mix(in srgb, var(--purple-950) 12%, transparent), color-mix(in srgb, var(--white) 12%, transparent));
  --color-border-inverse: color-mix(in srgb, var(--white) 14%, transparent);
  --color-focus: light-dark(var(--purple-700), var(--purple-200));
  --color-focus-soft: light-dark(var(--purple-100), var(--purple-800));
  --color-focus-inverse: var(--purple-100);
  --color-rating: light-dark(var(--amber-600), var(--amber-500));
  --color-danger: light-dark(var(--red-700), var(--red-100));
  --color-danger-surface: light-dark(var(--red-50), var(--red-900));
  --color-danger-text: light-dark(var(--red-800), var(--red-100));
  --logo-filter: none;

  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-24: 96px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --font-body: "Rubik", system-ui, sans-serif;
  --font-display: "Nexa", "Rubik", system-ui, sans-serif;
  --text-3xs: 11px;
  --text-2xs: 13px;
  --text-xs: 15px;
  --text-sm: 16px;
  --text-md: 17px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: clamp(26px, 3vw, 34px);
  --text-4xl: clamp(30px, 3.6vw, 46px);
  --text-5xl: clamp(34px, 4.6vw, 56px);
  --text-6xl: clamp(38px, 5.6vw, 68px);
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.65;
  --tracking-tight: -0.01em;
  --tracking-caps: 0.1em;

  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 22px;
  --icon-xl: 48px;
  --size-disc: 48px;
  --size-avatar: 112px;
  --size-avatar-lg: 128px;
  --size-checkbox: 20px;
  --logo-height: 44px;
  --logo-height-lg: 52px;
  --control-height-sm: 44px;
  --control-height-lg: 52px;
  --control-width-2-digits: calc(3ch + 2 * var(--space-4));
  --control-width-4-digits: calc(5ch + 2 * var(--space-4));

  --shadow-sm: 0 8px 24px -16px color-mix(in srgb, var(--purple-950) 40%, transparent);
  --shadow-md: 0 16px 32px -16px color-mix(in srgb, var(--purple-950) 25%, transparent);
  --shadow-lg: 0 8px 24px -6px color-mix(in srgb, var(--purple-950) 45%, transparent);
  --shadow-accent: 0 16px 32px -16px color-mix(in srgb, var(--purple-700) 60%, transparent);

  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-enter: 0.3s;
  --duration-draw: 0.45s;
  --duration-stagger: 0.05s;
  --delay-draw: 0.1s;
  --ease-out: ease-out;
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --distance-enter: var(--space-3);
  --distance-lift: var(--space-1);
  --opacity-dimmed: 0.55;

  --z-header: 999;
  --z-skip-link: 2000;

  --content-width: 1260px;
  --content-width-wide: 1440px;
  --content-width-narrow: 720px;
  --content-width-text: 800px;
  --content-width-quote: 880px;
  --aside-min-width: 280px;
  --gutter: clamp(var(--space-5), 4vw, var(--space-10));
  --section-padding: clamp(var(--space-16), 8vw, var(--space-24));
  --header-height: 64px;
  --sticky-offset: calc(var(--header-height) + var(--space-5));
}
@media (min-width: 1200px) {
  :root { --header-height: 76px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --logo-filter: brightness(0) invert(1); }
}
:root[data-theme="dark"] { --logo-filter: brightness(0) invert(1); }