/*
  Design tokens: the single source of truth for color, type, space, radius and shadow.
  This is the ONLY file allowed to contain raw colors (npm run check enforces it).
  privatetutor1: warm off-white paper, near-black ink, MIT red (#A31F34 = oklch 0.469 0.166 18.6) as accent.
  Dark mode is a comfortable deep navy, never black. Game moments get warm gold and sky blue.
*/
:root {
  --brand-h: 18.6;
  --brand-c: 0.166;
  --paper-h: 84.6;
  --navy-h: 262;

  color-scheme: light dark;

  /* surfaces + text (light): warm paper */
  --bg: oklch(0.985 0.003 var(--paper-h));
  --surface: oklch(0.997 0.002 var(--paper-h));
  --surface-2: oklch(0.958 0.006 var(--paper-h));
  --border: oklch(0.905 0.006 var(--paper-h));
  --border-strong: oklch(0.82 0.008 var(--paper-h));
  --text: oklch(0.2 0.004 var(--paper-h));
  --text-muted: oklch(0.47 0.008 var(--paper-h));
  --overlay: oklch(0.2 0.01 var(--paper-h) / 0.45);

  /* brand: MIT red */
  --brand: oklch(0.469 var(--brand-c) var(--brand-h));
  --brand-hover: oklch(0.41 var(--brand-c) var(--brand-h));
  --brand-soft: oklch(0.955 0.025 var(--brand-h));
  --brand-border: oklch(0.84 0.07 var(--brand-h));
  --on-brand: oklch(0.99 0.003 var(--paper-h));
  --brand-gradient: linear-gradient(135deg, oklch(0.53 var(--brand-c) var(--brand-h)), oklch(0.43 var(--brand-c) calc(var(--brand-h) - 10)));
  --mit-gray: oklch(0.636 0.002 248);

  /* cheerful accents for game moments */
  --gold: oklch(0.8 0.15 80);
  --gold-soft: oklch(0.96 0.05 85);
  --sky: oklch(0.68 0.13 235);
  --sky-soft: oklch(0.95 0.035 235);

  /* diagram series: one fixed colour per meaning, never cycled (after the teacher demos) */
  --series-1: oklch(0.55 0.11 245);
  --series-2: oklch(0.66 0.12 165);
  --series-3: oklch(0.469 var(--brand-c) var(--brand-h));
  --series-neg: oklch(0.7 0.13 55);

  /* mastery scale: untouched -> learning -> solid, plus due */
  --m-none: oklch(0.9 0.005 var(--paper-h));
  --m-learning: oklch(0.82 0.12 80);
  --m-solid: oklch(0.62 0.13 155);
  --m-due: oklch(0.6 0.15 var(--brand-h));

  /* status */
  --success: oklch(0.52 0.13 155);
  --success-soft: oklch(0.95 0.045 155);
  --warning: oklch(0.6 0.14 70);
  --warning-soft: oklch(0.96 0.05 85);
  --danger: oklch(0.52 0.19 25);
  --danger-soft: oklch(0.96 0.03 25);
  --info: oklch(0.52 0.12 240);
  --info-soft: oklch(0.95 0.03 240);

  --focus-ring: 0 0 0 3px oklch(0.469 var(--brand-c) var(--brand-h) / 0.3);

  /* elevation: barely there; lines do the work */
  --shadow-sm: none;
  --shadow: 0 6px 16px oklch(0.3 0.01 var(--paper-h) / 0.08), 0 1px 3px oklch(0.3 0.01 var(--paper-h) / 0.06);
  --shadow-lg: 0 18px 44px oklch(0.3 0.01 var(--paper-h) / 0.16);

  /* type: sharp modern sans, moderate scale */
  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --leading: 1.55;

  /* space, radius, layout, motion */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --radius-full: 999px;
  --container: 76rem;
  --header-h: 3.75rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration: 160ms;
  --duration-slow: 420ms;
}

/* dark: follows the OS unless the user picked a theme (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: oklch(0.205 0.045 var(--navy-h));
    --surface: oklch(0.245 0.05 var(--navy-h));
    --surface-2: oklch(0.285 0.05 var(--navy-h));
    --border: oklch(0.34 0.045 var(--navy-h));
    --border-strong: oklch(0.42 0.045 var(--navy-h));
    --text: oklch(0.95 0.008 var(--paper-h));
    --text-muted: oklch(0.75 0.025 var(--navy-h));
    --overlay: oklch(0.1 0.03 var(--navy-h) / 0.6);
    --brand: oklch(0.7 0.15 var(--brand-h));
    --brand-hover: oklch(0.76 0.14 var(--brand-h));
    --brand-soft: oklch(0.32 0.07 var(--brand-h));
    --brand-border: oklch(0.48 0.1 var(--brand-h));
    --on-brand: oklch(0.18 0.04 var(--navy-h));
    --gold: oklch(0.84 0.14 85);
    --gold-soft: oklch(0.34 0.06 80);
    --sky: oklch(0.76 0.11 235);
    --sky-soft: oklch(0.33 0.06 240);
    --series-1: oklch(0.72 0.11 245);
    --series-2: oklch(0.76 0.12 165);
    --series-3: oklch(0.7 0.15 var(--brand-h));
    --series-neg: oklch(0.78 0.12 55);
    --m-none: oklch(0.36 0.04 var(--navy-h));
    --m-learning: oklch(0.78 0.12 80);
    --m-solid: oklch(0.72 0.13 155);
    --m-due: oklch(0.7 0.15 var(--brand-h));
    --success: oklch(0.74 0.14 155);
    --success-soft: oklch(0.32 0.05 155);
    --warning: oklch(0.8 0.13 80);
    --warning-soft: oklch(0.34 0.06 80);
    --danger: oklch(0.72 0.17 25);
    --danger-soft: oklch(0.33 0.07 25);
    --info: oklch(0.76 0.11 240);
    --info-soft: oklch(0.32 0.05 240);
    --focus-ring: 0 0 0 3px oklch(0.7 0.15 var(--brand-h) / 0.45);
    --shadow-sm: 0 1px 2px oklch(0.05 0.02 var(--navy-h) / 0.4);
    --shadow: 0 6px 16px oklch(0.05 0.02 var(--navy-h) / 0.4), 0 1px 3px oklch(0.05 0.02 var(--navy-h) / 0.4);
    --shadow-lg: 0 18px 44px oklch(0.05 0.02 var(--navy-h) / 0.6);
  }
}

:root[data-theme='dark'] {
  --bg: oklch(0.205 0.045 var(--navy-h));
  --surface: oklch(0.245 0.05 var(--navy-h));
  --surface-2: oklch(0.285 0.05 var(--navy-h));
  --border: oklch(0.34 0.045 var(--navy-h));
  --border-strong: oklch(0.42 0.045 var(--navy-h));
  --text: oklch(0.95 0.008 var(--paper-h));
  --text-muted: oklch(0.75 0.025 var(--navy-h));
  --overlay: oklch(0.1 0.03 var(--navy-h) / 0.6);
  --brand: oklch(0.7 0.15 var(--brand-h));
  --brand-hover: oklch(0.76 0.14 var(--brand-h));
  --brand-soft: oklch(0.32 0.07 var(--brand-h));
  --brand-border: oklch(0.48 0.1 var(--brand-h));
  --on-brand: oklch(0.18 0.04 var(--navy-h));
  --gold: oklch(0.84 0.14 85);
  --gold-soft: oklch(0.34 0.06 80);
  --sky: oklch(0.76 0.11 235);
  --sky-soft: oklch(0.33 0.06 240);
  --series-1: oklch(0.72 0.11 245);
  --series-2: oklch(0.76 0.12 165);
  --series-3: oklch(0.7 0.15 var(--brand-h));
  --series-neg: oklch(0.78 0.12 55);
  --m-none: oklch(0.36 0.04 var(--navy-h));
  --m-learning: oklch(0.78 0.12 80);
  --m-solid: oklch(0.72 0.13 155);
  --m-due: oklch(0.7 0.15 var(--brand-h));
  --success: oklch(0.74 0.14 155);
  --success-soft: oklch(0.32 0.05 155);
  --warning: oklch(0.8 0.13 80);
  --warning-soft: oklch(0.34 0.06 80);
  --danger: oklch(0.72 0.17 25);
  --danger-soft: oklch(0.33 0.07 25);
  --info: oklch(0.76 0.11 240);
  --info-soft: oklch(0.32 0.05 240);
  --focus-ring: 0 0 0 3px oklch(0.7 0.15 var(--brand-h) / 0.45);
  --shadow-sm: 0 1px 2px oklch(0.05 0.02 var(--navy-h) / 0.4);
  --shadow: 0 6px 16px oklch(0.05 0.02 var(--navy-h) / 0.4), 0 1px 3px oklch(0.05 0.02 var(--navy-h) / 0.4);
  --shadow-lg: 0 18px 44px oklch(0.05 0.02 var(--navy-h) / 0.6);
}

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