/* ==========================================================================
   THE Z DECK — DESIGN TOKENS
   The only file in the deck allowed to contain hard physical units.
   Everything downstream composes these tokens. Light is the default;
   [data-theme="dark"] is an optional token flip, not a second design.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- BRAND PRIMARIES (fixed, never re-tinted) ------------------ */
  --c-deep: #193b65;
  --c-deep-press: #122c4d;
  --c-teal: #4b9a80;
  --c-sand: #b38a58;
  --c-ink: #14263d;
  /* Text that sits on a fill drawn with --c-deep. Dark mode flips --c-deep to
     a light blue, so the label must flip with it. */
  --c-on-deep: #faf7f1;

  /* ---------- TEXT (AA verified against --c-paper) ---------------------- */
  --c-ink-2: #3d4b60;
  --c-ink-3: #5c6a7d;
  --c-teal-ink: #2e7a62;      /* teal dark enough for small text  (4.8:1) */
  --c-sand-ink: #8a6534;      /* sand dark enough for small text  (4.9:1) */
  --c-deep-ink: #14304f;

  /* ---------- SURFACES (warm-white paper stack) ------------------------- */
  --c-paper: #faf7f1;
  --c-paper-2: #f4efe6;
  --c-paper-3: #ece5d9;
  --c-paper-sunk: #e6ddce;
  --c-white: #ffffff;
  --c-surface: rgba(255, 255, 255, 0.72);

  /* ---------- LINES / ELEVATION (alpha only, never grey boxes) ---------- */
  --c-line: rgba(20, 38, 61, 0.13);
  --c-line-soft: rgba(20, 38, 61, 0.07);
  --c-line-strong: rgba(20, 38, 61, 0.26);
  /* nav dots are a control, not a hairline: 1.4.11 wants 3:1 minimum */
  --c-rail: #6b7889;
  --c-veil: rgba(20, 38, 61, 0.04);
  --e-1: 0 1px 2px rgba(20, 38, 61, 0.05), 0 10px 30px -24px rgba(20, 38, 61, 0.35);
  --e-2: 0 1px 1px rgba(20, 38, 61, 0.05), 0 18px 44px -30px rgba(20, 38, 61, 0.45);
  --e-3: 0 30px 70px -44px rgba(20, 38, 61, 0.55);
  --e-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* ---------- SEMANTIC STATE ------------------------------------------- */
  --c-ok: #2e7a62;
  --c-ok-wash: rgba(75, 154, 128, 0.12);
  --c-warn: #8a5a12;
  --c-warn-wash: rgba(179, 138, 88, 0.18);
  --c-err: #9c352c;
  --c-err-wash: rgba(156, 53, 44, 0.1);
  --c-focus: #193b65;
  --c-focus-halo: rgba(25, 59, 101, 0.28);

  /* ---------- TYPE ------------------------------------------------------ */
  --font-sans: "Montserrat", "Avenir Next", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", "ui-monospace", "Menlo", "Consolas", monospace;

  --ratio: 1.25;
  --fs-hero: clamp(2.6rem, 6.4vw, 5rem);
  --fs-display: clamp(2rem, 4.4vw, 3.25rem);
  --fs-h2: clamp(1.45rem, 2.4vw, 2rem);
  --fs-h3: clamp(1.02rem, 1.35vw, 1.19rem);
  --fs-h4: clamp(0.92rem, 1.1vw, 1rem);
  --fs-body: clamp(0.95rem, 1vw, 1.03rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-micro: 0.69rem;
  --fs-num: clamp(1.9rem, 3.6vw, 2.75rem);
  --fs-num-sm: clamp(1.35rem, 2.2vw, 1.75rem);
  --fs-mark: clamp(3rem, 9vw, 6.5rem);

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.62;
  --lh-loose: 1.75;

  --tr-tight: -0.028em;
  --tr-snug: -0.014em;
  --tr-wide: 0.06em;
  --tr-wider: 0.13em;
  --tr-widest: 0.2em;

  --w-body: 400;
  --w-strong: 600;

  /* ---------- SPACE (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96) ---------- */
  --s-0: 0;
  --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: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --gutter: clamp(1.15rem, 4.2vw, 3rem);
  --section-pad: clamp(3.25rem, 7vw, 6.5rem);
  --stack: clamp(1rem, 1.6vw, 1.35rem);
  --stack-lg: clamp(1.6rem, 3vw, 2.6rem);

  /* ---------- MEASURE / GRID ------------------------------------------- */
  --container: 76rem;
  --container-wide: 86rem;
  --measure: 64ch;
  --measure-tight: 46ch;
  --col-visual: minmax(0, 1.15fr);
  --col-copy: minmax(0, 0.85fr);
  --col-gap: clamp(1.5rem, 4vw, 4.5rem);
  --aside-w: 9.5rem;

  /* ---------- RADIUS / BORDER ------------------------------------------ */
  --hair: 1px;
  --hair-2: 2px;
  --r-xs: 2px;
  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --border: var(--hair) solid var(--c-line);
  --border-soft: var(--hair) solid var(--c-line-soft);
  --border-strong: var(--hair) solid var(--c-line-strong);

  /* ---------- MOTION ---------------------------------------------------- */
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 720ms;
  --dur-5: 1100ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --stagger: 26ms;
  --stagger-fast: 14ms;
  --press-scale: 0.972;
  --lift: -3px;

  /* ---------- COMPONENT GEOMETRY --------------------------------------- */
  --header-h: 3.75rem;
  --progress-h: 2px;
  --rail-w: 1.5rem;
  --rail-dot: 6px;
  --rail-dot-active: 10px;
  --tap: 2.75rem;             /* 44px minimum hit target */
  --btn-h: 2.75rem;
  --chip-h: 1.75rem;
  --icon: 1.05rem;
  --icon-lg: 1.5rem;
  --hero-min: 88svh;
  --hero-art: clamp(11rem, 30vw, 27.5rem);
  --hero-art-sm: min(58vw, 17rem);
  --rail-h: calc(var(--tap) + var(--s-4));

  --bar-h: 0.55rem;
  --bar-h-lg: 0.9rem;
  --chart-h: 13rem;
  --chart-h-sm: 8.5rem;
  --donut: clamp(7rem, 15vw, 9.5rem);
  --donut-hole: 62%;
  --heat-cell: clamp(2.1rem, 4.4vw, 3.4rem);
  --heat-gap: 3px;
  --heat-min: 34rem;
  /* A phone cannot show six region columns at 34rem without wrapping every
     header into three lines, so the matrix scrolls wider instead. */
  --heat-min-sm: 46rem;
  --heat-rowhead: 7rem;
  --heat-rowhead-sm: 4.4rem;
  /* Season-matrix ramp: four readable steps, lightest = marginal.
     Light runs paper → teal → deep; dark runs dark teal tints with the
     most saturated step last, so intensity still reads by lightness. */
  --heat-l1: color-mix(in srgb, var(--c-teal) 18%, var(--c-paper));
  --heat-l2: color-mix(in srgb, var(--c-teal) 42%, var(--c-paper));
  --heat-l3: color-mix(in srgb, var(--c-teal) 58%, var(--c-deep));
  --heat-l4: var(--c-deep);
  --timeline-w: 2px;
  --timeline-node: 0.95rem;

  --card-pad: clamp(1rem, 2.2vw, 1.6rem);
  --card-pad-lg: clamp(1.35rem, 3vw, 2.4rem);

  /* ---------- EFFECTS (physical, therefore owned here) ------------------ */
  --blur-1: 10px;
  --blur-2: 12px;
  --inset-0: 0px;
  --saturate: 1.1;

  /* ---------- Z --------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 20;
  --z-rail: 40;
  --z-header: 50;
  --z-toast: 80;
  --z-skip: 90;

  /* ---------- DENSITY --------------------------------------------------- */
  --density: 1;
  --density-gap: calc(var(--s-5) * var(--density));
}

/* Optional dark presentation — same geometry, flipped surfaces.
   Not the default; exposed only via the theme toggle. */
[data-theme="dark"] {
  color-scheme: dark;
  --c-ink: #f2ede3;
  --c-ink-2: #cfd6e0;
  --c-ink-3: #a9b4c2;
  --c-teal-ink: #7fc4ac;
  --c-sand-ink: #d3ae7d;
  --c-deep-ink: #cddff5;
  --c-paper: #0f1a29;
  --c-paper-2: #142234;
  --c-paper-3: #1a2b40;
  --c-paper-sunk: #0b1420;
  --c-white: #16263a;
  --c-surface: rgba(22, 38, 58, 0.7);
  --c-line: rgba(226, 235, 245, 0.15);
  --c-line-soft: rgba(226, 235, 245, 0.08);
  --c-line-strong: rgba(226, 235, 245, 0.3);
  --c-rail: #7d8b9e;
  --c-veil: rgba(226, 235, 245, 0.05);
  --c-focus: #8dc7b2;
  --c-focus-halo: rgba(141, 199, 178, 0.34);
  --c-ok: #7fc4ac;
  --c-ok-wash: rgba(75, 154, 128, 0.2);
  --c-warn: #d3ae7d;
  --c-err: #e89084;
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 34px -26px rgba(0, 0, 0, 0.9);
  --e-2: 0 1px 1px rgba(0, 0, 0, 0.35), 0 20px 48px -32px rgba(0, 0, 0, 0.95);
  --e-3: 0 34px 74px -46px rgba(0, 0, 0, 0.95);
  --e-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --c-deep: #7ea6d6;
  --c-deep-press: #9dbde4;
  --c-on-deep: #0f1a29;
  --heat-l1: color-mix(in srgb, var(--c-teal) 18%, var(--c-paper-2));
  --heat-l2: color-mix(in srgb, var(--c-teal) 34%, var(--c-paper-2));
  --heat-l3: color-mix(in srgb, var(--c-teal) 55%, var(--c-paper-2));
  --heat-l4: color-mix(in srgb, var(--c-teal) 86%, var(--c-paper-2));
}

/* Compact reference density for wide desktop screens. */
@media (min-width: 64em) {
  :root {
    --density: 0.86;
  }
}