/*
 * CG50 Academy — design tokens (P1-Site).
 * One accent (deep teal), warm paper neutrals, light + dark.
 * Dark applies via prefers-color-scheme unless <html data-theme="light">,
 * or always with <html data-theme="dark">.
 */
:root {
  color-scheme: light;

  /* Type */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;/* 15 */
  --fs-md: 1.0625rem;  /* 17 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: 2rem;      /* 32 */
  --fs-3xl: clamp(2.125rem, 1.4rem + 2.6vw, 3rem);
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  /* Spacing (4px grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* Radii, borders, shadows */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(31, 28, 22, .06), 0 1px 1px rgba(31, 28, 22, .04);
  --shadow-2: 0 2px 6px rgba(31, 28, 22, .06), 0 8px 24px rgba(31, 28, 22, .07);
  --shadow-3: 0 12px 40px rgba(31, 28, 22, .14);

  /* Neutrals — warm paper */
  --bg: #f6f4ef;
  --bg-sunk: #efece5;
  --surface: #fffefb;
  --surface-2: #faf8f3;
  --line: #e4dfd5;
  --line-strong: #cfc8bb;
  --ink: #1c2024;
  --ink-2: #3e454c;
  --muted: #6a7178;
  --faint: #959ba1;

  /* Accent — deep teal */
  --accent: #0b6e66;
  --accent-strong: #08564f;
  --accent-ink: #ffffff;
  --accent-soft: #e2f1ee;
  --accent-line: #b7dcd5;

  /* Feedback */
  --warn: #9a5b00;
  --warn-soft: #fcf1dc;
  --warn-line: #efd29c;
  --bad: #b3261e;
  --bad-soft: #fbe9e7;
  --bad-line: #f1c2bc;
  --good: var(--accent);
  --good-soft: var(--accent-soft);

  /* Keycap chips (lesson markup) */
  --cap-bg: #2a2e34;
  --cap-ink: #f4f4f2;
  --cap-edge: #121417;
  --cap-shift-bg: #f2c230;
  --cap-shift-ink: #2a2100;
  --cap-shift-edge: #b98d0e;
  --cap-alpha-bg: #d6453d;
  --cap-alpha-ink: #ffffff;
  --cap-alpha-edge: #9b2620;
  --cap-fkey-bg: #e9e6df;
  --cap-fkey-ink: #1c2024;
  --cap-fkey-edge: #b9b3a7;
  --cap-shift-text: #9a6c00;   /* yellow-ish legend on light surface, readable */
  --cap-alpha-text: #c0362f;
  --scr-bg: #eef3ea;
  --scr-ink: #1f2a1d;
  --scr-line: #c9d6c3;

  /* Layout */
  --header-h: 60px;
  --content-max: 1200px;
  --prose-max: 62ch;
  --gutter: clamp(16px, 4vw, 40px);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms;

  --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #14171a;
    --bg-sunk: #0f1214;
    --surface: #1b1f23;
    --surface-2: #20252a;
    --line: #2c3238;
    --line-strong: #3d454c;
    --ink: #eceae5;
    --ink-2: #c9cbc9;
    --muted: #9aa1a7;
    --faint: #6f777e;
    --accent: #4cc3b2;
    --accent-strong: #74d6c8;
    --accent-ink: #062521;
    --accent-soft: #15302d;
    --accent-line: #24524c;
    --warn: #e9b45a; --warn-soft: #2d2415; --warn-line: #5a4520;
    --bad: #f08a80; --bad-soft: #321b19; --bad-line: #5e2c27;
    --cap-bg: #3a3f46; --cap-ink: #f4f4f2; --cap-edge: #0b0c0e;
    --cap-fkey-bg: #2c3238; --cap-fkey-ink: #eceae5; --cap-fkey-edge: #11151a;
    --cap-shift-text: #f2c230;
    --cap-alpha-text: #ff8078;
    --scr-bg: #1e2a22; --scr-ink: #d5ecd0; --scr-line: #33463a;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-3: 0 12px 40px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14171a;
  --bg-sunk: #0f1214;
  --surface: #1b1f23;
  --surface-2: #20252a;
  --line: #2c3238;
  --line-strong: #3d454c;
  --ink: #eceae5;
  --ink-2: #c9cbc9;
  --muted: #9aa1a7;
  --faint: #6f777e;
  --accent: #4cc3b2;
  --accent-strong: #74d6c8;
  --accent-ink: #062521;
  --accent-soft: #15302d;
  --accent-line: #24524c;
  --warn: #e9b45a; --warn-soft: #2d2415; --warn-line: #5a4520;
  --bad: #f08a80; --bad-soft: #321b19; --bad-line: #5e2c27;
  --cap-bg: #3a3f46; --cap-ink: #f4f4f2; --cap-edge: #0b0c0e;
  --cap-fkey-bg: #2c3238; --cap-fkey-ink: #eceae5; --cap-fkey-edge: #11151a;
  --cap-shift-text: #f2c230;
  --cap-alpha-text: #ff8078;
  --scr-bg: #1e2a22; --scr-ink: #d5ecd0; --scr-line: #33463a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, .5);
}