/* tokens.css — design tokens for modelrisk.app
 *
 * Editorial / magazine aesthetic. Warm parchment-tinted dark mode.
 * Restrained accents (gold). Severity colors tinted toward print
 * (editorial red, not GitHub red). No purple gradients on white.
 *
 * Per Decision 028's lifecycle-governance charter and the
 * frontend-design skill: refined minimalism executed with
 * intentionality and precision.
 */

:root {
  /* ============ Surfaces ============ */
  --bg:       #0d0e0c;        /* warm near-black, like aged ink */
  --bg-1:     #131512;        /* elevated surface */
  --bg-2:     #1a1d18;        /* card / table interior */
  --bg-3:     #22251f;        /* hover surface */

  /* ============ Borders & rules ============ */
  --border:   #28291f;        /* subtle horizontal rule */
  --border-h: #3a3c30;        /* hover */
  --rule-w:   1px;            /* default horizontal rule weight */

  /* ============ Text ============ */
  --tx-1:     #ede9d9;        /* parchment off-white, primary */
  --tx-2:     #a8a496;        /* muted secondary */
  --tx-3:     #8a857c;        /* meta labels — WCAG AA 5.3:1 on --bg (was #6b6760 ~3.4:1) */
  --tx-4:     #6f6b62;        /* dim — WCAG 3.6:1 on --bg (was #4a4640 ~2.1:1, near-invisible) */

  /* ============ Accent (used sparingly, magazine-style) ============ */
  --acc:      #c4a35f;        /* warm gold */
  --acc-tint: rgba(196, 163, 95, 0.08);
  --acc-h:    #d4b46f;        /* hover gold */

  /* ============ State / severity (editorial print, not LED) ============ */
  --crit:     #c63d3d;        /* The Economist red */
  --high:     #d4823b;        /* warm amber */
  --med:      #c4a35f;        /* gold */
  --low:      #6b9b94;        /* deep teal */
  --info:     #8a857c;        /* matches tx-3 — neutral */
  --ok:       #7a9568;        /* sage */
  --stale:    #8a76a3;        /* muted plum */

  /* ============ Tinted backgrounds for pills ============ */
  --crit-bg:  rgba(198, 61, 61, 0.10);
  --high-bg:  rgba(212, 130, 59, 0.10);
  --med-bg:   rgba(196, 163, 95, 0.10);
  --low-bg:   rgba(107, 155, 148, 0.10);
  --info-bg:  rgba(107, 103, 96, 0.12);
  --ok-bg:    rgba(122, 149, 104, 0.10);
  --stale-bg: rgba(138, 118, 163, 0.10);

  /* ============ Typography ============ */
  --serif:    'Newsreader', 'Iowan Old Style', 'Cambria', Georgia, serif;
  --sans:     'Switzer', 'Söhne', 'Suisse Int\'l', system-ui, -apple-system, sans-serif;
  --mono:     'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --fs-display: 44px;        /* page masthead */
  --fs-h1:      28px;        /* section heads */
  --fs-h2:      18px;        /* subsection */
  --fs-body:    15px;        /* body prose */
  --fs-ui:      13.5px;      /* UI labels */
  --fs-meta:    11.5px;      /* mono meta */
  --fs-pill:    10.5px;      /* pill labels */
  --fs-num-l:   34px;        /* large counts in tiles */

  --lh-display: 1.05;
  --lh-prose:   1.6;          /* generous for editorial reading */
  --lh-ui:      1.4;
  --lh-tight:   1.2;

  --track-smcp:  0.08em;      /* tracked small caps */
  --track-mono: -0.005em;     /* slight negative tracking on mono */

  /* ============ Spacing scale ============ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ============ Layout ============ */
  --frame-max:   1280px;       /* page width cap */
  --measure:     68ch;         /* prose column measure */
  --gutter:      var(--sp-7);  /* generous side gutter — magazine feel */

  /* ============ Misc ============ */
  --radius-sm: 2px;            /* slight, never marshmallow */
  --radius-md: 3px;
  --shadow:    0 1px 0 rgba(0, 0, 0, 0.4);
  --duration:  140ms;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
}