/* Design tokens — the SINGLE source for the v3 look (R14). A colour/spacing/type
   change edits THIS file once and propagates to every page. Aesthetic: refined
   warm-paper financial terminal (parity with the current orox cream theme, elevated:
   Fraunces display + IBM Plex Sans body + IBM Plex Mono figures, sharper contrast,
   hairline rules, tabular numerals, live up/down flash). */

:root {
  /* paper + ink */
  --paper:        #FBF8F2;   /* warm off-white (matches current site) */
  --paper-2:      #F5F0E6;   /* slightly deeper panel */
  --ink:          #26211A;   /* near-black warm ink (sharper than the old #4A453E) */
  --ink-2:        #6B6256;   /* secondary text */
  --ink-3:        #9A8F7E;   /* tertiary / captions */
  --rule:         #E7DECF;   /* hairline rules */
  --rule-2:       #D8CDB8;

  /* brand + semantic */
  --brand:        #7A3B32;   /* oxblood — editorial accent, links, brand */
  --brand-soft:   #A9564A;
  --up:           #2E7D52;   /* gains */
  --up-bg:        #E3F0E7;
  --down:         #B4493B;   /* losses */
  --down-bg:      #F4E3DF;
  --warn:         #B07A1E;   /* stale / caveat */
  --warn-bg:      #F6ECD6;

  /* type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --fs-hero:      clamp(28px, 3.4vw, 46px);
  --fs-h2:        15px;
  --fs-kpi:       40px;
  --fs-body:      14px;
  --fs-sm:        12px;
  --fs-xs:        11px;

  /* space + shape */
  --gap:          20px;
  --pad:          18px;
  --radius:       10px;
  --maxw:         1240px;
  --shadow:       0 1px 0 var(--rule), 0 6px 24px rgba(38, 33, 26, .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5;
  font-feature-settings: "tnum" 1, "cv05" 1;
  background-image: radial-gradient(circle at 1px 1px, rgba(38,33,26,.025) 1px, transparent 0);
  background-size: 22px 22px;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); }
.muted { color: var(--ink-2); } .caption { color: var(--ink-3); font-size: var(--fs-xs); }