/* tokens.css — "Broadsheet" design tokens for Yearly (see BROADSHEET_DESIGN_SPEC.md §1).
   All screens fully migrated (Phases 0–3). Only canonical names remain — no legacy remaps. */

:root {
  /* ---- Broadsheet surfaces ---- */
  --paper:       #F4F1E8;   /* page background — warm paper, NEVER pure white */
  --paper-tint:  #EFEBE0;   /* very subtly sunk areas (rare; prefer hairlines over fills) */
  --ink:         #221F19;   /* primary text / display numbers — near-black, NEVER #000 */
  --ink-2:       #5B5547;   /* secondary text (hero subline, body emphasis) */
  --muted:       #8D846F;   /* tertiary: eyebrows, meta, axis labels */
  --hair:        rgba(34, 28, 18, 0.13);   /* hairline rules, dividers, light borders */
  --hair-strong: rgba(34, 28, 18, 0.28);   /* the 1.5px rule under section headers */

  /* ---- Accent + state (used SPARINGLY) ---- */
  --terra: #BE4A30;   /* the single accent: links, active nav, alert/mover dots, key numbers */
  --amber: #C0852B;   /* "watch" severity */
  --sage:  #5E7C54;   /* "good" / under-target severity */

  /* ---- Chart palette ---- */
  --chart-actual:   #BE4A30;   /* cumulative actual line + area stroke */
  --chart-proj:     #B98E6A;   /* dashed projection line (muted terracotta) */
  --chart-target:   #8D846F;   /* dashed target reference line */
  --chart-pace:     #B6AD95;   /* faint linear-pace diagonal */
  --chart-grid:     rgba(34, 28, 18, 0.10);
  --chart-axis:     #9A9176;   /* axis tick labels (mono) */
  --chart-fill-top: 0.22;      /* opacity of the area gradient's top stop */

  /* ---- Type (three families, strict roles) ---- */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;        /* display numbers + section headers */
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* UI + body prose */
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', monospace;   /* ALL figures, labels, eyebrows, ticks */

  /* ---- Radii / spacing ---- */
  --r-card: 18px;
  --r-pill: 999px;
  --screen-pad: 26px;   /* horizontal padding of every screen */
  --s-3: 12px;

  /* ---- Motion ---- */
  --dur: 240ms;
  --dur-fast: 150ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- Elevation (softened for paper — no heavy drop shadows) ---- */
  --shadow-rest:  0 1px 2px rgba(60, 52, 38, 0.06);
  --shadow-modal: 0 30px 80px rgba(60, 52, 38, 0.22), 0 6px 18px rgba(60, 52, 38, 0.12);

}