/* Design tokens — TeenTech SAT design system. Dark is the default theme. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0A0A; --surface: #141414; --surface-2: #1B1B1B; --border: #262626; --border-strong: #3A3A3A;
  --ink: #F4F4F2; --ink-2: #D6D6D2; --muted: #9A9A94;
  --brand-050: #1C190B; --brand-100: #29240C; --brand-200: #3D3510; --brand-300: #6B5A10;
  --brand-400: #D9B500; --brand-500: #FFDB2E; --brand-600: #FFD400; --brand-700: #FFE15C;
  --on-brand: #0B0B0B; --eyebrow: #FFD400;
  --ok: #4ADE80; --ok-bg: #10261A; --warn: #FBBF24; --warn-bg: #2A2108;
  --danger: #F87171; --danger-bg: #2E1214; --info: #60A5FA; --info-bg: #0F1C33;
  --m-nodata: #2A2A2A; --m-learning: #E8797D; --m-developing: #EFB750; --m-mastered: #4FBF8B;
  --topbar-bg: color-mix(in srgb, var(--bg) 88%, transparent);
  --sidebar-bg: var(--bg);
  --overlay: rgba(0, 0, 0, .6);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F5F2; --surface: #FFFFFF; --surface-2: #F2F2EE; --border: #E4E4DE; --border-strong: #CFCFC7;
  --ink: #111111; --ink-2: #2E2E2E; --muted: #6B6B66;
  --brand-050: #FFFAE6; --brand-100: #FFF6D1; --brand-200: #FFF0B3; --brand-300: #FFE98A;
  --brand-400: #E6BF00; --brand-500: #FFDB2E; --brand-600: #FFD400; --brand-700: #7A5F00;
  --on-brand: #0B0B0B; --eyebrow: #8A6B00;
  --ok: #15803D; --ok-bg: #E7F6EC; --warn: #A16207; --warn-bg: #FDF4DC;
  --danger: #B91C1C; --danger-bg: #FDECEC; --info: #1D4ED8; --info-bg: #E8EFFD;
  --m-nodata: #E4E4DE;
  --sidebar-bg: #FFFFFF;
  --overlay: rgba(0, 0, 0, .35);
}

:root {
  /* Writing Task 1 chart series (brand yellow leads, no purple) */
  --chart-1: #E6BF00; --chart-2: #14B8C4; --chart-3: #F08A24; --chart-4: #1F9D55; --chart-5: #60A5FA; --chart-6: #E5484D;
  /* Fixed brand values used where the spec pins them regardless of theme. */
  --accent: #FFD400; --accent-ink: #0B0B0B;
  --hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(255, 212, 0, .16), transparent 55%), #141414;
  --hero-border: #262626; --hero-ink: #F4F4F2; --hero-muted: #A9A9A3;
  --hero-track: rgba(255, 255, 255, .22); --hero-fill: #FFFFFF;

  --r-sm: 10px; --r-md: 12px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --sidebar-w: 276px; --topbar-h: 64px; --tabbar-h: 56px;

  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px #FFD400;
}