/* Design tokens v1 ("code on a stage"). The code stage is dark in both themes; the page around it is cool paper (light) or night (dark).
   Every text/background and control/background pair below was checked for WCAG AA (>= 4.5:1 text, >= 3:1 controls).
   Theme: follows the OS by default; <html data-theme="light|dark"> overrides it. */

:root {
  color-scheme: light;

  /* page */
  --bg: #f4f5fa;
  --surface: #ffffff;
  --surface-2: #e8eaf6;        /* hover, tracks */
  --ink: #111634;
  --muted: #4b5278;
  --line: #d5d9ee;             /* decorative dividers */
  --line-strong: #6f78a6;      /* borders of interactive controls (>= 3:1 on --bg and --surface) */
  --link: #3a35c8;
  --focus: #3a35c8;

  /* the one warm colour: the highlighter. Always paired with --on-accent-attention text. */
  --accent-attention: #ffc83d;
  --accent-attention-hover: #ffd566;
  --on-accent-attention: #111634;
  --accent-attention-text: #7a4f00;          /* highlighter colour as text on the page (>= 4.5:1) */
  --accent-line: #b88400;                    /* the highlighter as a line or bar on the page (>= 3:1); gold on paper is too pale */

  /* effects */
  --shadow-attention: none;
  --shadow-sheet: 0 -24px 60px -20px rgba(0, 0, 0, 0.5);
  --attention-wash: rgba(255, 200, 61, 0.22);   /* the highlighter sweeping a line */
  --scrim: rgba(7, 11, 24, 0.6);

  /* verdicts: always paired with an icon and a word */
  --outcome-right: #17603a;      --outcome-right-bg: #e2f3e8;
  --outcome-partial: #7a4f00; --outcome-partial-bg: #fff1c9;
  --outcome-wrong: #92264a;     --outcome-wrong-bg: #fbe5ed;

  /* the stage (identical in both themes) */
  --stage-bg: #0e1428;
  --stage-bg-raised: #18213f;          /* caption bar, hover */
  --stage-line: #2a3563;
  --stage-ink: #e9ecfb;
  --stage-muted: #a3abd0;
  --stage-linenum: #8d97c4;
  --stage-mark: #2b2a1f;       /* marked line background */
  --stage-mark-edge: #ffc83d;
  --stage-focus: #ffc83d;
  --stage-link: #aeb6ff;

  /* syntax, on the stage */
  --tok-keyword: #ff9ac1;
  --tok-string: #9be3a8;
  --tok-number: #ffc07a;
  --tok-comment: #8d97c4;
  --tok-function: #8fb4ff;
  --tok-builtin: #7fe0e8;
  --tok-decorator: #c9a8ff;

  /* map cells */
  --mark-none: transparent;
  --mark-right: #17603a;
  --mark-partial: #b88400;
  --mark-wrong: #92264a;
  --outcome-unknown: #6f78a6;

  /* type */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-code: ui-monospace, "JetBrains Mono", "Cascadia Code", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --text-3xl: clamp(2.5rem, 1.6rem + 3.4vw, 3.75rem);
  --text-code: 1.0625rem;
  --lh-body: 1.6;
  --lh-tight: 1.1;
  --lh-code: 1.7;

  /* space: 4px base */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem;

  --radius: 18px;
  --radius-sm: 10px;
  --radius-md: 14px;       /* buttons */
  --radius-stage: 20px;
  --shadow-stage: none;
  --measure: 40rem;
  --wide: 76rem;
  --tap: 3rem;
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Dark values are declared twice (OS-driven and manual) because CSS cannot share a block between
   a media query and an attribute selector without a build step. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1020; --surface: #141b33; --surface-2: #1f2849;
    --ink: #e9ecfb; --muted: #a3abd0; --line: #232d54; --line-strong: #7983b3;
    --link: #aeb6ff; --focus: #ffc83d;
    --accent-attention-text: #ffc83d;
    --accent-line: #ffc83d;
    --outcome-right: #8fd6a9; --outcome-right-bg: #12301f;
    --outcome-partial: #f0c765; --outcome-partial-bg: #33280d;
    --outcome-wrong: #f4a3bd; --outcome-wrong-bg: #3a1424;
    --stage-bg: #070b18; --stage-bg-raised: #111833; --stage-line: #232d54;
    --mark-right: #8fd6a9; --mark-partial: #f0c765; --mark-wrong: #f4a3bd; --outcome-unknown: #7983b3;
    --shadow-stage: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1020; --surface: #141b33; --surface-2: #1f2849;
  --ink: #e9ecfb; --muted: #a3abd0; --line: #232d54; --line-strong: #7983b3;
  --link: #aeb6ff; --focus: #ffc83d;
  --accent-attention-text: #ffc83d;
  --accent-line: #ffc83d;
  --outcome-right: #8fd6a9; --outcome-right-bg: #12301f;
  --outcome-partial: #f0c765; --outcome-partial-bg: #33280d;
  --outcome-wrong: #f4a3bd; --outcome-wrong-bg: #3a1424;
  --stage-bg: #070b18; --stage-bg-raised: #111833; --stage-line: #232d54;
  --mark-right: #8fd6a9; --mark-partial: #f0c765; --mark-wrong: #f4a3bd; --outcome-unknown: #7983b3;
  --shadow-stage: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Selectable themes. Each block defines every colour and effect token; a test keeps the sets identical to :root.
   Declared after the OS-driven dark block so they win over it (equal specificity, later wins). */

:root[data-theme="paper"] {
  color-scheme: light;
  --bg: #f6f1e7; --surface: #fffdf8; --surface-2: #ece4d3;
  --ink: #2a2118; --muted: #5d5040; --line: #ddd2bc; --line-strong: #7d6e57;
  --link: #1f4f8f; --focus: #1f4f8f;
  --accent-attention: #ffc83d; --accent-attention-hover: #ffd566; --on-accent-attention: #2a2118;
  --accent-attention-text: #7a4f00; --accent-line: #a87400;
  --shadow-attention: none; --shadow-sheet: 0 -24px 60px -20px rgba(42, 33, 24, 0.45); --attention-wash: rgba(255, 200, 61, 0.22); --scrim: rgba(42, 33, 24, 0.6);
  --outcome-right: #1f5a34; --outcome-right-bg: #e4efde;
  --outcome-partial: #7a4f00; --outcome-partial-bg: #fbeec6;
  --outcome-wrong: #8a2a45; --outcome-wrong-bg: #f7e2e3;
  --stage-bg: #1d1914; --stage-bg-raised: #28221b; --stage-line: #3a3228;
  --stage-ink: #f1e9dc; --stage-muted: #b8ab97; --stage-linenum: #a99c88;
  --stage-mark: #33291a; --stage-mark-edge: #ffc83d; --stage-focus: #ffc83d; --stage-link: #b9c8ff;
  --tok-keyword: #ff9ac1; --tok-string: #9be3a8; --tok-number: #ffc07a; --tok-comment: #a99c88; --tok-function: #8fb4ff; --tok-builtin: #7fe0e8; --tok-decorator: #c9a8ff;
  --mark-none: transparent; --mark-right: #1f5a34; --mark-partial: #a87400; --mark-wrong: #8a2a45; --outcome-unknown: #7d6e57;
  --shadow-stage: none;
}

:root[data-theme="slate"] {
  color-scheme: dark;
  --bg: #1b1f27; --surface: #242a35; --surface-2: #2f3744;
  --ink: #e6e9ef; --muted: #a9b2c0; --line: #323a48; --line-strong: #8590a3;
  --link: #9ec1ff; --focus: #ffc83d;
  --accent-attention: #ffc83d; --accent-attention-hover: #ffd566; --on-accent-attention: #1b1f27;
  --accent-attention-text: #ffc83d; --accent-line: #ffc83d;
  --shadow-attention: none; --shadow-sheet: 0 -24px 60px -20px rgba(0, 0, 0, 0.6); --attention-wash: rgba(255, 200, 61, 0.22); --scrim: rgba(10, 12, 16, 0.65);
  --outcome-right: #94d7ad; --outcome-right-bg: #1b3126;
  --outcome-partial: #f0c765; --outcome-partial-bg: #3a2f14;
  --outcome-wrong: #f4a3bd; --outcome-wrong-bg: #3d1f2c;
  --stage-bg: #12151b; --stage-bg-raised: #1c212b; --stage-line: #2c3442;
  --stage-ink: #e6e9ef; --stage-muted: #a9b2c0; --stage-linenum: #8f9ab0;
  --stage-mark: #2b2a1f; --stage-mark-edge: #ffc83d; --stage-focus: #ffc83d; --stage-link: #aeb6ff;
  --tok-keyword: #ff9ac1; --tok-string: #9be3a8; --tok-number: #ffc07a; --tok-comment: #8f9ab0; --tok-function: #8fb4ff; --tok-builtin: #7fe0e8; --tok-decorator: #c9a8ff;
  --mark-none: transparent; --mark-right: #94d7ad; --mark-partial: #f0c765; --mark-wrong: #f4a3bd; --outcome-unknown: #8590a3;
  --shadow-stage: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

:root[data-theme="contrast"] {
  color-scheme: dark;
  --bg: #000000; --surface: #0b0b0b; --surface-2: #1c1c1c;
  --ink: #ffffff; --muted: #e0e0e0; --line: #8a8a8a; --line-strong: #d0d0d0;
  --link: #9dc4ff; --focus: #ffe600;
  --accent-attention: #ffd84d; --accent-attention-hover: #ffe58a; --on-accent-attention: #000000;
  --accent-attention-text: #ffd84d; --accent-line: #ffd84d;
  --shadow-attention: none; --shadow-sheet: 0 -24px 60px -20px rgba(0, 0, 0, 0.9); --attention-wash: rgba(255, 216, 77, 0.3); --scrim: rgba(0, 0, 0, 0.8);
  --outcome-right: #9be7b4; --outcome-right-bg: #05200f;
  --outcome-partial: #ffd84d; --outcome-partial-bg: #2a2000;
  --outcome-wrong: #ffb3c8; --outcome-wrong-bg: #2f0613;
  --stage-bg: #000000; --stage-bg-raised: #141414; --stage-line: #8a8a8a;
  --stage-ink: #ffffff; --stage-muted: #e0e0e0; --stage-linenum: #d0d0d0;
  --stage-mark: #2a2200; --stage-mark-edge: #ffd84d; --stage-focus: #ffe600; --stage-link: #b3c3ff;
  --tok-keyword: #ffb3d9; --tok-string: #b6f0c3; --tok-number: #ffd29a; --tok-comment: #d0d0d0; --tok-function: #b3ccff; --tok-builtin: #9ff0f7; --tok-decorator: #dcc3ff;
  --mark-none: transparent; --mark-right: #9be7b4; --mark-partial: #ffd84d; --mark-wrong: #ffb3c8; --outcome-unknown: #d0d0d0;
  --shadow-stage: 0 0 0 1px #8a8a8a inset;
}

/* Auto follows the operating system's contrast preference: the same values as the Contrast theme (a test keeps them identical). */
@media (prefers-contrast: more) {
  :root:not([data-theme]) {
    /* high contrast, aims at WCAG AAA (7:1) for text */
    color-scheme: dark;
    --bg: #000000; --surface: #0b0b0b; --surface-2: #1c1c1c;
    --ink: #ffffff; --muted: #e0e0e0; --line: #8a8a8a; --line-strong: #d0d0d0;
    --link: #9dc4ff; --focus: #ffe600;
    --accent-attention: #ffd84d; --accent-attention-hover: #ffe58a; --on-accent-attention: #000000;
    --accent-attention-text: #ffd84d; --accent-line: #ffd84d;
    --shadow-attention: none; --shadow-sheet: 0 -24px 60px -20px rgba(0, 0, 0, 0.9); --attention-wash: rgba(255, 216, 77, 0.3); --scrim: rgba(0, 0, 0, 0.8);
    --outcome-right: #9be7b4; --outcome-right-bg: #05200f;
    --outcome-partial: #ffd84d; --outcome-partial-bg: #2a2000;
    --outcome-wrong: #ffb3c8; --outcome-wrong-bg: #2f0613;
    --stage-bg: #000000; --stage-bg-raised: #141414; --stage-line: #8a8a8a;
    --stage-ink: #ffffff; --stage-muted: #e0e0e0; --stage-linenum: #d0d0d0;
    --stage-mark: #2a2200; --stage-mark-edge: #ffd84d; --stage-focus: #ffe600; --stage-link: #b3c3ff;
    --tok-keyword: #ffb3d9; --tok-string: #b6f0c3; --tok-number: #ffd29a; --tok-comment: #d0d0d0; --tok-function: #b3ccff; --tok-builtin: #9ff0f7; --tok-decorator: #dcc3ff;
    --mark-none: transparent; --mark-right: #9be7b4; --mark-partial: #ffd84d; --mark-wrong: #ffb3c8; --outcome-unknown: #d0d0d0;
    --shadow-stage: 0 0 0 1px #8a8a8a inset;
  }
}