/* tokens.css — design tokens.

   ONE RULE: every colour in this app comes from here. A component that hardcodes a
   hex cannot follow the theme, and a `var(--name, #fallback)` for a token that was
   never defined silently ships the fallback — which is exactly what had happened to
   the plan screen (11 undefined tokens, all quietly rendering off-palette).

   Semantic names (--pass / --warn / --fail) are what components should reach for.
   The raw scale (--c-*) exists so the semantic layer has something to point at. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* ---- surfaces & ink ---- */
  --bg: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --ink: #16203a;          /* darkened from #1b2438: 15.3:1 on --surface */
  --ink-2: #38425c;
  --muted: #5c6478;        /* darkened from #6b7488 to clear 4.5:1 on --surface-2 */
  --line: #e2e6ef;
  --line-2: #d3d9e6;

  /* ---- brand ---- */
  --primary: #3b5bdb;
  --primary-d: #2f49b0;
  --primary-soft: #e7ecfd;
  --accent: #0ca678;
  /* Text that sits on ANY saturated fill — the primary button, the brand mark, the
     A/B/C/D option badges, status tags. In dark mode those fills are lightened for
     legibility against the dark surface, which drops white-on-fill to 2.8:1, so the
     label flips to dark. Never write a literal #fff on a coloured fill. */
  --on-primary: #ffffff;

  /* ---- status scale ---- */
  --c-low: #c02020;         /* darkened for 4.5:1 on --fail-soft */
  --c-near: #8a5200;       /* amber must clear 4.5:1 on --warn-soft, not just on white */
  --c-pass: #1f6e30;       /* darkened for 4.5:1 on --pass-soft */
  --c-strong: #1971c2;

  /* ---- semantic aliases (what components should use) ---- */
  --pass: var(--c-pass);
  --warn: var(--c-near);
  --fail: var(--c-low);
  --good: var(--c-pass);
  --danger: var(--c-low);

  /* soft tints — backgrounds behind status text, never text themselves */
  --pass-soft: #e6f4ea;
  --warn-soft: #fdf3e2;
  --fail-soft: #fdeaea;
  --accent-soft: rgba(59, 91, 219, .12);

  /* chips / neutral fills */
  --chip-bg: #eef1f7;
  --chip-bg-hover: #dde3ef;

  /* borders — semantic names for the two line weights */
  --border: var(--line-2);
  --border-soft: var(--line);
  --text: var(--ink);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(20,30,60,.06), 0 6px 20px rgba(20,30,60,.07);
  --shadow-sm: 0 1px 2px rgba(20,30,60,.08);

  --gap: 18px;
  --maxw: 1080px;

  /* Minimum hit area. WCAG 2.5.8 asks 24x24 CSS px; native guidance asks 44-48.
     Anything the candidate taps repeatedly during a timed exam gets the larger one. */
  --tap: 44px;
}

/* ---- dark theme ----------------------------------------------------------
   Only the colour tokens are redefined; every component follows automatically.
   A study app gets used at night, and a white 1080px column at 11pm is the
   difference between another 20 minutes of practice and closing the laptop. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11141c;
    --surface: #171b26;
    --surface-2: #1e2331;
    --ink: #e8ecf5;
    --ink-2: #c3cadb;
    --muted: #99a2b8;        /* 5.6:1 on --surface */
    --line: #262c3b;
    --line-2: #333b4e;

    --primary: #7d95f5;      /* lightened: 6.1:1 on --surface */
    --primary-d: #9fb1f8;
    --primary-soft: #22293f;
    --on-primary: #11141c;

    --c-low: #ff8080;
    --c-near: #f0b429;
    --c-pass: #57c973;
    --c-strong: #6cb6f0;

    --pass-soft: #16281c;
    --warn-soft: #2a2113;
    --fail-soft: #2b1618;
    --accent-soft: rgba(125, 149, 245, .16);

    --chip-bg: #232a3a;
    --chip-bg-hover: #2c3446;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;          /* was 15.5px — below the readable-body minimum */
  line-height: 1.55;
}
.muted { color: var(--muted); }
.small { font-size: .875rem; }   /* was .86em, which compounded inside nested text */
code { font-family: var(--mono); background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: .9em; }

/* Respect the OS setting. The app animates hovers, panel lifts and the gauge;
   for a vestibular-sensitive user those are not decoration, they are symptoms. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .statcard:hover, .plan-stage:hover { transform: none !important; }
}