/* ============================================================================
   NFNO Design Tokens
   ----------------------------------------------------------------------------
   The single shared scale for the whole publication. Pages and components must
   reference these variables rather than hard-coding values, so typography,
   spacing, colour and layout stay consistent across brands and pages.

   Colour tokens carry NFNO defaults. A brand overrides only what it needs via a
   generated `:root` block (see scripts/build-site.mjs, brand.theme). Structural
   tokens (type scale, spacing, layout) are brand-neutral and rarely change.
   ========================================================================== */

:root {
  /* ── Palette (brand-overridable) ──────────────────────────────────────── */
  --paper: #f4f0e7;      /* page background */
  --paper-2: #fbf9f4;    /* raised surfaces (cards, record) */
  --ink: #181714;        /* primary text + editorial rules */
  --muted: #6f6a61;      /* metadata, secondary text */
  --line: #cfc8bb;       /* hairline rules */
  --accent: #8e2420;     /* NFNO red — probability, brand mark, links */
  --accent-2: #651713;   /* deep red — hover/press */
  --positive: #285c47;   /* verified hits, scorecard */

  /* ── Type families (brand-overridable) ────────────────────────────────── */
  --font-serif: "Playfair Display", Georgia, serif;   /* headlines */
  --font-sans: "DM Sans", Arial, sans-serif;          /* UI, metadata, controls */
  --font-read: Georgia, serif;                         /* body / deks */

  /* ── Type scale ───────────────────────────────────────────────────────── */
  --fs-micro: 9px;      /* eyebrows, toplines */
  --fs-tiny: 10px;      /* labels */
  --fs-meta: 11px;      /* nav, edition line, metadata */
  --fs-small: 13px;     /* small body */
  --fs-base: 15px;      /* base UI + read */
  --fs-lead: 19px;      /* dek */
  --fs-h3: 29px;        /* card headline */
  --fs-h2: 31px;        /* section head */
  --fs-h1: clamp(32px, 4vw, 52px); /* hero */
  --fs-brand: clamp(34px, 5vw, 65px); /* masthead wordmark */

  --lh-tight: 0.98;
  --lh-snug: 1.12;
  --lh-body: 1.55;

  --tracking-cap: 0.12em;   /* uppercase nav / labels */
  --tracking-wide: 0.16em;  /* eyebrows */
  --tracking-head: -0.045em;/* display headlines */

  /* ── Spacing scale ────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 22px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 70px;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --measure-max: 1240px;   /* max content width */
  --gutter: 32px;          /* horizontal page padding (desktop) */
  --gutter-sm: 18px;       /* tablet/mobile */
  --rule: 1px;             /* hairline weight */
  --rule-strong: 2px;      /* section-head weight */

  /* ── Breakpoints (documented; used by @media in nfno2.css) ────────────── */
  /* --bp-tablet: 850px;  --bp-mobile: 560px; */
}