/**
 * Encored design tokens — mirrors docs/DESIGN.md and ColorTokens.kt
 */

:root {
  /* Colors — dark (default) */
  --color-bg: #0b1326;
  --color-on-bg: #dae2fd;

  --color-surface: #0b1326;
  --color-surface-container-lowest: #060e20;
  --color-surface-container-low: #131b2e;
  --color-surface-container: #171f33;
  --color-surface-container-high: #222a3d;
  --color-surface-container-highest: #2d3449;
  --color-surface-bright: #31394d;

  --color-text: #dae2fd;
  --color-text-muted: #cbc3d7;
  --color-outline: #958ea0;
  --color-outline-variant: #494454;

  --color-primary: #d0bcff;
  --color-on-primary: #3c0091;
  --color-primary-container: #a078ff;
  --color-on-primary-container: #340080;
  --color-inverse-primary: #6d3bd7;

  --color-secondary: #4cd7f6;
  --color-on-secondary: #003640;
  --color-secondary-container: #03b5d3;

  --color-tertiary: #ffb869;

  --color-error: #ffb4ab;

  --color-card-border: rgba(255, 255, 255, 0.08);
  --color-nav-bg: rgba(11, 19, 38, 0.7);

  --gradient-hero: linear-gradient(135deg, #d0bcff 0%, #4cd7f6 100%);
  --gradient-cta: linear-gradient(135deg, #a078ff 0%, #03b5d3 100%);
  --gradient-mesh: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(109, 59, 215, 0.25), transparent),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(76, 215, 246, 0.15), transparent),
    radial-gradient(ellipse 50% 30% at 50% 90%, rgba(208, 188, 255, 0.1), transparent);

  /* Typography */
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --text-display-lg: 800 3rem/1.17 var(--font-display);
  --text-headline-lg: 700 2rem/1.25 var(--font-display);
  --text-headline-md: 700 1.5rem/1.33 var(--font-display);
  --text-body-lg: 400 1.125rem/1.56 var(--font-body);
  --text-body-md: 400 1rem/1.5 var(--font-body);
  --text-label-md: 600 0.875rem/1.43 var(--font-body);
  --text-label-sm: 500 0.75rem/1.33 var(--font-body);

  /* Spacing — 4px baseline */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --container-padding: 20px;
  --gutter: 16px;
  --content-max: 1120px;
  --prose-max: 720px;

  /* Radii */
  --radius-sm: 4px;
  --radius-default: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-card: 0 24px 48px rgba(109, 59, 215, 0.08);
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #fdfbff;
    --color-on-bg: #1a1c2e;

    --color-surface: #ffffff;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f3f0fa;
    --color-surface-container: #ede9f4;
    --color-surface-container-high: #e8e4f0;
    --color-surface-container-highest: #e2deea;
    --color-surface-bright: #fdfbff;

    --color-text: #283044;
    --color-text-muted: #494454;
    --color-outline: #7a7389;

    --color-primary: #6d3bd7;
    --color-on-primary: #ffffff;
    --color-primary-container: #e9ddff;
    --color-on-primary-container: #23005c;

    --color-secondary: #006874;
    --color-secondary-container: #acedff;

    --color-card-border: rgba(109, 59, 215, 0.1);
    --color-nav-bg: rgba(253, 251, 255, 0.85);

    --gradient-hero: linear-gradient(135deg, #6d3bd7 0%, #006874 100%);
    --gradient-cta: linear-gradient(135deg, #6d3bd7 0%, #03b5d3 100%);
    --gradient-mesh: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(109, 59, 215, 0.12), transparent),
      radial-gradient(ellipse 60% 40% at 80% 20%, rgba(0, 104, 116, 0.08), transparent);

    --shadow-card: 0 24px 48px rgba(109, 59, 215, 0.06);
  }
}