/* ══════════════════════════════════════════════════════════════
   THE READ — design tokens

   One meaningful colour axis: the four propagation-stage hues carry
   almost all the colour on this site. Everything else — surfaces,
   borders, text — stays a graded neutral so the stage colour is what
   the eye reads first on a dense board. Validated for OKLCH lightness
   band, chroma floor, CVD separation (deuteranopia/protanopia
   simulated) and normal-vision separation via the palette validator;
   the stage-1/stage-4 adjacent pair sits in the accepted 6-8 ΔE floor
   band, which is why stage colour is NEVER the only signal — it is
   always paired with the stage name and a day count in text.
   ══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* surfaces — warm paper, not stark white */
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #efede6;
  --surface-3: #e7e3d8;
  --border: #dedad0;
  --border-strong: #c7c2b4;
  --scrim: rgba(20, 22, 26, 0.5);

  /* ink */
  --ink: #14161a;
  --ink-2: #4b4e55;
  --ink-3: #83858c;
  --ink-inverse: #fdfcfa;

  /* the propagation ladder — the one meaningful axis */
  --stage-1: #2f64c3;
  --stage-2: #008062;
  --stage-3: #b66e00;
  --stage-4: #b6143a;

  /* reserved status (freshness page only; always icon + label) */
  --good: #238744;

  /* typography */
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-ui: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;   /* 11 */
  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.8125rem;    /* 13 */
  --text-base: 0.9375rem;  /* 15 */
  --text-md: 1.0625rem;    /* 17 */
  --text-lg: 1.3125rem;    /* 21 */
  --text-xl: 1.75rem;      /* 28 */
  --text-2xl: 2.375rem;    /* 38 */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  /* spacing */
  --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: 4rem;

  /* shape — near-square, hairline separation, minimal shadow */
  --radius-sm: 3px;
  --radius-md: 5px;
  --shadow-1: 0 1px 2px rgba(20, 22, 26, 0.06);
  --shadow-2: 0 6px 24px rgba(20, 22, 26, 0.14);

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #101115;
    --surface: #16181d;
    --surface-2: #1c1f26;
    --surface-3: #23262e;
    --border: #2b2e37;
    --border-strong: #3c4049;
    --scrim: rgba(0, 0, 0, 0.6);

    --ink: #edeef0;
    --ink-2: #abadb4;
    --ink-3: #75777e;
    --ink-inverse: #101115;

    --stage-1: #5484da;
    --stage-2: #009874;
    --stage-3: #ba8700;
    --stage-4: #c72c4c;

    --good: #56ae6c;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #101115;
  --surface: #16181d;
  --surface-2: #1c1f26;
  --surface-3: #23262e;
  --border: #2b2e37;
  --border-strong: #3c4049;
  --scrim: rgba(0, 0, 0, 0.6);

  --ink: #edeef0;
  --ink-2: #abadb4;
  --ink-3: #75777e;
  --ink-inverse: #101115;

  --stage-1: #5484da;
  --stage-2: #009874;
  --stage-3: #ba8700;
  --stage-4: #c72c4c;

  --good: #56ae6c;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}