:root {
  color-scheme: light dark;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif;
  --text-large-title: 600 2.125rem/1.2 var(--font-sans);
  --text-title-1: 600 1.75rem/1.2 var(--font-sans);
  --text-title-2: 600 1.375rem/1.25 var(--font-sans);
  --text-title-3: 600 1.25rem/1.25 var(--font-sans);
  --text-headline: 600 1.0625rem/1.3 var(--font-sans);
  --text-body: 400 1.0625rem/1.47 var(--font-sans);
  --text-callout: 400 1rem/1.4 var(--font-sans);
  --text-subheadline: 400 0.9375rem/1.35 var(--font-sans);
  --text-footnote: 400 0.8125rem/1.4 var(--font-sans);
  --text-caption-1: 400 0.75rem/1.35 var(--font-sans);
  --text-caption-2: 400 0.6875rem/1.3 var(--font-sans);

  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-normal: 0;
  --tracking-loose: 0.01em;
  --tracking-eyebrow: 0.06em;

  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container-text: 980px;
  --container-app: 1200px;
  --container-wide: 1440px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --tap-min: 44px;
  --button-h-mobile: 50px;
  --button-h-desktop: 44px;
  --nav-h-mobile: 44px;
  --nav-h-desktop: 52px;

  --purple: #765494;
  --gold: #85612d;
  --pink: #FF2D55;
  --accent: var(--purple);
  --on-accent: #FFFFFF;

  --label: #211e27;
  --label-secondary: #68616f;
  --label-tertiary: rgba(60, 60, 67, 0.30);
  --label-quaternary: rgba(60, 60, 67, 0.18);
  --bg: #fbfafc;
  --bg-secondary: #f2eff5;
  --bg-tertiary: #FFFFFF;
  --bg-secondary-grouped: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --fill: rgba(120, 120, 128, 0.20);
  --fill-secondary: rgba(120, 120, 128, 0.16);
  --fill-tertiary: rgba(118, 118, 128, 0.12);
  --fill-quaternary: rgba(116, 116, 128, 0.08);
  --separator: rgba(60, 48, 76, 0.15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
  --glass-bg: rgba(251, 250, 252, 0.88);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-blur: blur(16px) saturate(130%);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.35);

  --dur-micro: 150ms;
  --dur-fast: 250ms;
  --dur-base: 350ms;
  --dur-slow: 500ms;
  --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --purple: #b69ada;
    --gold: #d6b778;
    --on-accent: #201429;
    --pink: #FF375F;
    --label: #f5f2f8;
    --label-secondary: #b3adbd;
    --label-tertiary: rgba(235, 235, 245, 0.30);
    --label-quaternary: rgba(235, 235, 245, 0.16);
    --bg: #101014;
    --bg-secondary: #15141b;
    --bg-tertiary: #211e28;
    --bg-secondary-grouped: #1b1921;
    --bg-elevated: #211e28;
    --fill: rgba(120, 120, 128, 0.36);
    --fill-secondary: rgba(120, 120, 128, 0.32);
    --fill-tertiary: rgba(118, 118, 128, 0.24);
    --fill-quaternary: rgba(116, 116, 128, 0.18);
    --separator: rgba(223, 212, 240, 0.13);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
    --glass-bg: rgba(24, 22, 30, 0.88);
    --glass-bg-strong: rgba(30, 30, 32, 0.75);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.12);
  }
}

:root[data-theme="dark"] {
  --purple: #b69ada;
  --gold: #d6b778;
  --on-accent: #201429;
  --pink: #FF375F;
  --label: #f5f2f8;
  --label-secondary: #b3adbd;
  --label-tertiary: rgba(235, 235, 245, 0.30);
  --label-quaternary: rgba(235, 235, 245, 0.16);
  --bg: #101014;
  --bg-secondary: #15141b;
  --bg-tertiary: #211e28;
  --bg-secondary-grouped: #1b1921;
  --bg-elevated: #211e28;
  --fill: rgba(120, 120, 128, 0.36);
  --fill-secondary: rgba(120, 120, 128, 0.32);
  --fill-tertiary: rgba(118, 118, 128, 0.24);
  --fill-quaternary: rgba(116, 116, 128, 0.18);
  --separator: rgba(223, 212, 240, 0.13);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --glass-bg: rgba(24, 22, 30, 0.88);
  --glass-bg-strong: rgba(30, 30, 32, 0.75);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.12);
}

:root[data-theme="light"] {
  color-scheme: light;
}