:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xl2: 24px;
  --radius-xl3: 32px;
  --radius-pill: 999px;

  --font-voice: 'Fraunces', Georgia, serif;
  --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xl2: 64px;
}

/* Base surfaces — mode driven, matches src/theme/colors.js (light) and
   src/theme/palettes.js darkOverrides (dark) */
:root,
[data-mode="light"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: #FBFAFF;
  --bg-tertiary: #F1EAFF;
  --text-primary: #1A1A2E;
  --text-secondary: #5F5A6D;
  --text-tertiary: #6E6878;
  --border-tertiary: rgba(83, 74, 183, 0.13);
  --border-secondary: rgba(83, 74, 183, 0.24);
  --surface-glass: rgba(255, 255, 255, 0.88);
  --surface-raised: rgba(255, 255, 255, 0.94);
}

[data-mode="dark"] {
  --bg-primary: #1B1A26;
  --bg-secondary: #141320;
  --bg-tertiary: #0E0D16;
  --text-primary: #F3F1FA;
  --text-secondary: #C3BDD8;
  --text-tertiary: #A39CB8;
  --border-tertiary: rgba(255, 255, 255, 0.10);
  --border-secondary: rgba(255, 255, 255, 0.20);
  --surface-glass: rgba(27, 26, 38, 0.88);
  --surface-raised: rgba(34, 32, 48, 0.94);
}

/* Accent hues — 6 options x light/dark, matches ACCENT_OPTIONS exactly */
[data-accent="purple"] {
  --accent-600: #534AB7;
  --accent-text: #534AB7;
  --accent-800: #3D357F;
  --accent-200: #DCD8FF;
  --accent-100: #F2F0FF;
  --accent-on-600: #FFFFFF;
}
[data-mode="dark"][data-accent="purple"] {
  --accent-600: #A78BFA;
  --accent-text: #D8CFFF;
  --accent-800: #F2F0FF;
  --accent-200: rgba(167, 139, 250, 0.34);
  --accent-100: rgba(83, 74, 183, 0.20);
  --accent-on-600: #1B1A26;
}

[data-accent="teal"] {
  --accent-600: #1D9E75;
  --accent-text: #0F766E;
  --accent-800: #134E4A;
  --accent-200: #A7F3D0;
  --accent-100: #ECFDF5;
  /* #0E0D16 vs #1D9E75 = 5.70:1, passes WCAG AA (4.5:1) */
  --accent-on-600: #0E0D16;
}
[data-mode="dark"][data-accent="teal"] {
  --accent-600: #5EEAD4;
  --accent-text: #B2F5EA;
  --accent-800: #ECFDF5;
  --accent-200: rgba(94, 234, 212, 0.34);
  --accent-100: rgba(29, 158, 117, 0.18);
  --accent-on-600: #1B1A26;
}

[data-accent="rose"] {
  --accent-600: #D4537E;
  --accent-text: #BE185D;
  --accent-800: #831843;
  --accent-200: #FBCFE8;
  --accent-100: #FDF2F8;
  /* #0E0D16 vs #D4537E = 4.91:1, passes WCAG AA (4.5:1) */
  --accent-on-600: #0E0D16;
}
[data-mode="dark"][data-accent="rose"] {
  --accent-600: #FDA4AF;
  --accent-text: #FFE4E6;
  --accent-800: #FFF1F2;
  --accent-200: rgba(253, 164, 175, 0.34);
  --accent-100: rgba(212, 83, 126, 0.18);
  --accent-on-600: #1B1A26;
}

[data-accent="amber"] {
  --accent-600: #B45309;
  --accent-text: #92400E;
  --accent-800: #78350F;
  --accent-200: #FDE68A;
  --accent-100: #FFFBEB;
  --accent-on-600: #FFFFFF;
}
[data-mode="dark"][data-accent="amber"] {
  --accent-600: #FBBF24;
  --accent-text: #FDE68A;
  --accent-800: #FFFBEB;
  --accent-200: rgba(251, 191, 36, 0.32);
  --accent-100: rgba(239, 159, 39, 0.18);
  --accent-on-600: #1B1A26;
}

[data-accent="blue"] {
  --accent-600: #2563EB;
  --accent-text: #1D4ED8;
  --accent-800: #1E3A8A;
  --accent-200: #BFDBFE;
  --accent-100: #EFF6FF;
  --accent-on-600: #FFFFFF;
}
[data-mode="dark"][data-accent="blue"] {
  --accent-600: #60A5FA;
  --accent-text: #BFDBFE;
  --accent-800: #EFF6FF;
  --accent-200: rgba(147, 197, 253, 0.34);
  --accent-100: rgba(37, 99, 235, 0.18);
  --accent-on-600: #1B1A26;
}

[data-accent="green"] {
  --accent-600: #4D7C0F;
  --accent-text: #3F6212;
  --accent-800: #365314;
  --accent-200: #D9F99D;
  --accent-100: #F7FEE7;
  --accent-on-600: #FFFFFF;
}
[data-mode="dark"][data-accent="green"] {
  --accent-600: #A3E635;
  --accent-text: #D9F99D;
  --accent-800: #F7FEE7;
  --accent-200: rgba(163, 230, 53, 0.30);
  --accent-100: rgba(99, 153, 34, 0.18);
  --accent-on-600: #1B1A26;
}