/* ============================================================================
   tokens.css — THE single source of truth for Platinova's design tokens.

   Every page loads this FIRST, before any other stylesheet. Nothing else in the
   codebase may declare a `:root` block.

   Why this file exists (2026-08-15): the tokens used to be copy-pasted into
   three places — inline in index.html, in site.css, and in tool.css — and they
   had already drifted apart:
     · index.html declared --card, the others did not
     · tool.css had NO gold tokens at all, which is why the six tool pages were
       physically unable to render a brand CTA and read as a foreign site
     · tool.css stopped its gutter ladder at 900px, missing the 1280px step that
       DESIGN-LANGUAGE.md documents
   Three copies meant drift was guaranteed rather than possible. One copy makes
   it impossible.

   RULE: if you need a new value, add it here. Do not introduce a raw hex, a
   font stack, or a breakpoint anywhere else. See DESIGN-LANGUAGE.md §3 — the
   palette is a value ladder, and gold is the only sanctioned hue.
   ========================================================================== */

:root{
  /* ---- value ladder (DESIGN-LANGUAGE.md §3) ---------------------------- */
  --bg:#050505;                      /* page background            */
  --panel:#0a0a0a;                   /* section panels             */
  --card:#0d0d0d;                    /* cards sitting on a panel   */
  --fg:#f2f2f2;                      /* foreground text            */
  --dim:rgba(255,255,255,.45);       /* mid-reveal / tail text     */
  --line:rgba(255,255,255,.14);      /* 14% borders                */
  --line2:rgba(255,255,255,.08);     /* 8% borders                 */

  /* ---- the one sanctioned hue: brand gold, always a gradient -----------
     Four sanctioned forms, and no others. Before this file existed these
     were pasted as raw hex in 6 files (site/platinova/tool/articles/note.css
     + index.html) — which is how a fifth, undocumented variant (#B87F22 on
     the chart bars) crept in unnoticed. */
  --gold1:#F5CB74;
  --gold2:#D08F27;
  --goldgrad:linear-gradient(180deg,#F5CB74,#D08F27);              /* CTA + surface fills   */
  --goldtext:linear-gradient(120deg,#F7D389 5%,#C9882A 95%);       /* clipped text accents  */
  --goldbar:linear-gradient(180deg,#F5CB74,#B87F22);               /* chart bars (deeper)   */
  --goldink:#D9A249;                                               /* solid: icon strokes, kickers */
  --goldlite:#F7D389;                                              /* solid: light-end hover accent */

  /* ---- semantic tints — the ONLY other hue exception, tools only ------- */
  --good:#8fc7a5; --good-bg:#141f18;
  --warn:#d9b36a; --warn-bg:#211b10;
  --bad:#d98b82;  --bad-bg:#241312;

  /* ---- type (DESIGN-LANGUAGE.md §2) ------------------------------------ */
  --sans:'Inter Display','Inter',sans-serif;
  --serif:'Playfair Display',serif;
  --ui:'Urbanist',sans-serif;

  /* ---- container / gutter ladder (DESIGN-LANGUAGE.md, gutter rule) ------
     One rule for every page edge. Content caps at --maxw and never sits
     closer to the viewport edge than --gutter. Narrow measures (tools 860px,
     articles 720px) add the gutter OUTSIDE the measure. */
  --maxw:1360px;
  --gutter:20px;                     /* phones       */
}
@media(min-width:600px){ :root{--gutter:24px} }   /* large phones */
@media(min-width:900px){ :root{--gutter:32px} }   /* tablets      */
@media(min-width:1280px){:root{--gutter:48px} }   /* desktop      */