/* tokens.css — the custom-property contract. Custom properties only; no
   selector beyond :root. Every value used anywhere on the site is declared
   here. See docs/02-design-system.md. */

:root {
  /* ---- Surfaces ------------------------------------------------------ */
  /* docs/02a-color.md. The ramp runs DARKER as it comes forward: the page
     is a dark grey, a card is near-black and sits on it, a well is cut into
     a card. --surface-card is the exact fill of the brand tile, so the mark
     sits on a card without a seam. */
  --surface-page: #262626;
  --surface-card: #121212;
  --surface-well: #080808;

  /* ---- Lines --------------------------------------------------------- */
  --line: #333333;
  --line-strong: #474747;

  /* ---- Foreground ramp ----------------------------------------------- */
  /* Slightly warm: blue sits below red and green. */
  --fg-1: #EDEDEC;
  --fg-2: #A8A8A5;
  --fg-3: #92928F;

  /* ---- Semantics ------------------------------------------------------ */
  /* Green means Ndio, red means La, and nothing else. Three rungs, and they
     are not interchangeable — see docs/02a-color.md for the measurements.
       *-text         carries a glyph. Clears 4.5:1 on all three surfaces.
       --ndio / --la  borders, icons.  Clears 3:1, and in fact clears 4.5:1.
       *-fill         solid fills only. The flag colours. Never on a glyph,
                      and never on --surface-page, where they fall below 3:1. */
  --ndio-text: #5BBC7B;
  --la-text: #FF716B;
  --ndio: #4EAF6F;
  --la: #FD5654;
  --ndio-fill: #007A3D;
  --la-fill: #CE1126;

  /* ---- Category accents ----------------------------------------------- */
  /* Identity, never valence. These tint the card icon and nothing else: no
     price, no probability, no meter, no control, no chip. All seven sit at
     OKLCH L 0.80 C 0.10, and every hue is at least 47° from Ndio's and 53°
     from La's, so no accent can be mistaken for a position. Economy takes
     the gold; the other six walk the cool arc in even 26° steps.
     docs/02a-color.md. */
  --accent-economy: #E1B671;      /* h  78 */
  --accent-business: #64D1D7;     /* h 200 */
  --accent-weather: #71CBEF;      /* h 226 */
  --accent-geopolitics: #8EC2FD;  /* h 252 */
  --accent-technology: #AEB8FE;   /* h 278 */
  --accent-politics: #CCAEF2;     /* h 304 */
  --accent-culture: #E3A6DD;      /* h 330 */

  /* The card sets --accent from its own data-category. The fallback is a
     neutral, so an unmapped category degrades to a legible grey icon rather
     than to no icon. */
  --accent: var(--fg-2);

  /* ---- Focus ---------------------------------------------------------- */
  --focus: #EDEDEC;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ---- Type ----------------------------------------------------------- */
  /* One self-hosted variable family. The fallbacks carry the page for the
     one paint before the font arrives, under font-display: swap. */
  --font-sans: "Public Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-1: 0.6875rem;  /* 11px */
  --text-2: 0.8125rem;  /* 13px */
  --text-3: 1rem;       /* 16px */
  --text-4: 1.25rem;    /* 20px */
  --text-5: 1.5625rem;  /* 25px */
  --text-6: 2rem;       /* 32px */
  --text-7: 2.5rem;     /* 40px */
  --text-display: clamp(2.5rem, 1.75rem + 3vw, 4rem);  /* 40px -> 64px */

  --leading-1: 1.2;
  --leading-2: 1.4;
  --leading-3: 1.55;
  --leading-4: 1.35;
  --leading-5: 1.25;
  --leading-6: 1.2;
  --leading-7: 1;

  --track-1: 0.08em;
  --track-5: -0.01em;
  --track-6: -0.015em;
  --track-7: -0.02em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---- Space ---------------------------------------------------------- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2.5rem;    /* 40px */
  --space-7: 4rem;      /* 64px */

  /* ---- Shape ---------------------------------------------------------- */
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-full: 999px;
  --border: 1px;

  /* ---- Motion --------------------------------------------------------- */
  /* docs/02c-space-motion.md. The four board durations are separate from the
     three interaction durations because they are switched off together by
     the motion toggle and by prefers-reduced-motion. */
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --dur-count: 380ms;   /* probability count-up, under the 400ms budget */
  --dur-spark: 620ms;   /* sparkline draw-in */
  --dur-flash: 900ms;   /* drift colour flash, fading out */
  --dur-ticker: 90s;    /* one full pass of the headline strip */
  --dur-ambient: 48s;   /* featured-panel gradient mesh */

  /* ---- Layout --------------------------------------------------------- */
  --container: 1360px;
  --gutter: var(--space-4);
  --board-min-col: 288px;
  --board-gap: var(--space-4);
  --measure: 65ch;

  /* ---- Component sizes ------------------------------------------------ */
  /* In rem so they grow with a raised default font size. The px figures are
     their value at a 16px root. Card slot heights are minimums. */
  --header-h: 3.5rem;     /* 56px */
  --ticker-h: 2.25rem;    /* 36px */
  --control-h: 2.75rem;   /* 44px — the 44x44 touch minimum */
  --chip-h: 2.25rem;      /* 36px, plus --space-2 padding = 52px target */
  --bar-h: 4px;
  --card-icon: 2.5rem;    /* 40px */
  --mark-header: 26px;
  --mark-footer: 24px;
  --mark-landing: 64px;   /* the brand block on /download, and nowhere else */
  --search-max: 30rem;    /* 480px */

  --slot-title: 2.5rem;         /* 40px — two lines at --text-3/1.25 */
  --slot-probability: 2.5rem;   /* 40px */
  --slot-footer: 2.125rem;      /* 34px — two rows at --text-2/1.25 */
  --spark-w: 5.5rem;            /* 88px */
  --spark-h: 2.25rem;           /* 36px */
}

@media (min-width: 700px) {
  :root { --gutter: var(--space-5); }
}