/* ============================================================================
   Design tokens and themes — the vocabulary every other stylesheet speaks.
   The reasoning behind these values lives in DESIGN.md; this file is the
   implementation. Change one, change the other.

   Three type families do three different jobs, and the separation is strict:
   a serif for reading material, a neutral system sans for the interface, and a
   monospace for anything you watch or count. Text to be read must never look
   like a control, and a number being watched must never look like prose.

   The monospace carries the character here. With no font files allowed — the
   site has to work offline from the disk, so web fonts are out — the interface
   sans can only ever be a neutral carrier. The mono is what makes the product
   look like an instrument.

   Colour is restrained: one accent, used rarely. Green and red are RESERVED for
   correct and wrong in the review and never decorate anything. That reservation
   is what makes the clock turning amber genuinely alarming.

   Theming: light by default, dark via prefers-color-scheme, and either one
   forced by the data-theme attribute that the header toggle writes.

   Nothing here selects an element. If a rule paints something, it belongs in
   base.css, a component, or a screen.
   ========================================================================== */

:root {
  /* Type ------------------------------------------------------------------ */
  /* Documents: real text serifs at every level, not fallbacks. */
  --font-read: "Iowan Old Style", Charter, "Bitstream Charter", "Palatino Linotype", Palatino, Georgia, serif;
  /* Interface: a neutral carrier. The identity is deliberately not here. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Cantarell, Ubuntu, sans-serif;
  /* Instruments: the signature. Always paired with tabular-nums. */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Spacing scale (4 px base, compact density) ---------------------------- */
  --sp-1: .25rem;   /*  4px */
  --sp-2: .5rem;    /*  8px */
  --sp-3: .75rem;   /* 12px */
  --sp-4: 1rem;     /* 16px */
  --sp-5: 1.5rem;   /* 24px */
  --sp-6: 2rem;     /* 32px */
  --sp-7: 2.5rem;   /* 40px */
  --sp-8: 3rem;     /* 48px */

  /* Shape ------------------------------------------------------------------
     Near-square on purpose. Rounded corners read friendly, and this is not a
     friendly product — it is a rehearsal for an exam. */
  --r-sm: 3px;
  --r: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Motion — only ever to explain a change of state, never to delight. */
  --ease: cubic-bezier(.2, .6, .35, 1);
  --fast: 120ms;

  /* Sticky offsets. These are fallbacks: js/ui/router.js measures the real
     heights and overwrites them, because a guessed value slides the test bar
     under the header as soon as the font size or the status text changes. */
  --header-h: 56px;
  --testbar-h: 52px;
  --sticky-stack: calc(var(--header-h) + var(--testbar-h));

  /* Light palette ----------------------------------------------------------
     Warm paper rather than white: 75 minutes of reading is the use case. */
  --bg: #f5f3ef;
  --bg-accent: #efede8;
  --surface: #ffffff;
  --surface-2: #efede8;
  --surface-3: #e7e4dd;
  --border: #dfdcd5;
  --border-strong: #c4c0b6;
  --rule: #e8e5de;
  --text: #14171c;
  --text-muted: #5b6270;
  --text-faint: #8a909c;

  /* Deep teal. Test prep is saturated with royal blue; this stays
     institutional while being recognisable, and stays clear of the reserved
     green and red. */
  --accent: #0e6e6b;
  --accent-hover: #0b5c59;
  --accent-soft: #e4efee;
  --accent-border: #9cc6c4;
  --accent-text: #ffffff;

  /* Reserved. Never decorative. */
  --ok: #1f7a3d;
  --ok-soft: #e6f2e9;
  --ok-border: #a9cdb6;
  /* #b45309 was the obvious amber and it failed AA at 4.47:1 on --warn-soft.
     That pair is the clock at five minutes left, so it had to darken. */
  --warn: #a94d07;
  --warn-soft: #fbf0e3;
  --warn-border: #e0b98a;
  --bad: #b42318;
  --bad-soft: #fbeae8;
  --bad-border: #e8b0aa;

  /* Elevation is carried by borders and hairlines. Shadow is reserved for
     surfaces that genuinely float: the modal and the answer sheet. */
  --shadow-sm: none;
  --shadow: 0 1px 2px rgba(20, 23, 28, .04);
  --shadow-lg: 0 20px 56px -16px rgba(20, 23, 28, .26);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  :root:not([data-theme="light"]) {
    --bg: #0e1013;
    --bg-accent: #131820;
    --surface: #16191f;
    --surface-2: #1e222a;
    --surface-3: #262b34;
    --border: #2a2f39;
    --border-strong: #3c434f;
    --rule: #232830;
    --text: #e8eaed;
    --text-muted: #98a0ae;
    --text-faint: #6b7382;

    /* Surfaces are redesigned, not inverted, and the accent gains luminance:
       a dark surface needs a brighter teal to hold the same weight. */
    --accent: #3fb3ae;
    --accent-hover: #5bc7c2;
    --accent-soft: #12312f;
    --accent-border: #1f4f4c;
    --accent-text: #0e1013;

    --ok: #4fbe73;
    --ok-soft: #12291b;
    --ok-border: #245b37;
    --warn: #e0913f;
    --warn-soft: #2c2013;
    --warn-border: #5c4520;
    --bad: #e86a5e;
    --bad-soft: #2e1715;
    --bad-border: #5e2e28;

    --shadow-sm: none;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-lg: 0 20px 56px -16px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1013;
  --bg-accent: #131820;
  --surface: #16191f;
  --surface-2: #1e222a;
  --surface-3: #262b34;
  --border: #2a2f39;
  --border-strong: #3c434f;
  --rule: #232830;
  --text: #e8eaed;
  --text-muted: #98a0ae;
  --text-faint: #6b7382;

  --accent: #3fb3ae;
  --accent-hover: #5bc7c2;
  --accent-soft: #12312f;
  --accent-border: #1f4f4c;
  --accent-text: #0e1013;

  --ok: #4fbe73;
  --ok-soft: #12291b;
  --ok-border: #245b37;
  --warn: #e0913f;
  --warn-soft: #2c2013;
  --warn-border: #5c4520;
  --bad: #e86a5e;
  --bad-soft: #2e1715;
  --bad-border: #5e2e28;

  --shadow-sm: none;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 56px -16px rgba(0, 0, 0, .7);
}