/* ============================================================
   Go Upstream — Shared design tokens (marketing pages)
   Single source of truth, lifted from the canonical system at
   sample-reports/_ds/.../tokens/colors.css. If a value changes
   there, change it here too.

   Warm cream surfaces · single bold orange accent ·
   warm near-black ink. Color is vocabulary, not decoration.
   ============================================================ */

:root {
  /* ---- Surfaces & lines ---- */
  --bg:          #F4EDDF;   /* page background — warm parchment cream */
  --surf:        #FAF5EE;   /* card / panel surface — lighter cream */
  --surf-2:      #FFFFFF;   /* rare pure-white surface (text on orange) */
  --bdr:         #E2D4BE;   /* primary hairline border */
  --bdr-2:       #CABDA4;   /* hover / active border, MMM estimate ring */

  /* ---- Ink (text) ---- */
  --ink:         #1C1917;   /* near-black, warm — headings & body */
  --ink-2:       #6E5E4E;   /* secondary body text */
  --ink-3:       #A08E7A;   /* tertiary text, captions, axis labels */
  --on-accent:   #FFFFFF;   /* text on orange */

  /* ---- Brand accent ---- */
  --orange:      #E8671A;   /* THE accent — CTAs, links, live signal, key data */
  --orange-700:  #C4530F;   /* pressed / darker orange */
  --orange-text: #B54A0C;   /* orange TEXT on cream — passes WCAG AA (4.56:1) */

  /* ---- Accent washes ---- */
  --orange-tint: rgba(232, 103, 26, 0.06);
  --orange-line: rgba(232, 103, 26, 0.28);

  /* ---- Semantic aliases — prefer THESE in new CSS ---- */
  --surface-page:   var(--bg);
  --surface-card:   var(--surf);
  --text-strong:    var(--ink);
  --text-body:      var(--ink-2);
  --text-muted:     var(--ink-3);
  --border-default: var(--bdr);
  --border-strong:  var(--bdr-2);
  --accent:         var(--orange);
  --accent-press:   var(--orange-700);

  /* ---- Type ---- */
  --ff:   'Space Grotesk', system-ui, sans-serif;   /* everything textual */
  --mono: 'JetBrains Mono', ui-monospace, monospace; /* data, labels, eyebrows */

  /* ---- Legacy aliases (older page CSS references these) ---- */
  --terra:      var(--orange);
  --terra-text: var(--orange-text);
  --navy:       var(--ink);
}