/* ──────────────────────────────────────────────────────────────────────────
   COST OF WAR — Shared design tokens
   One source of truth for color, typography, motion, layout.
   Imported by every section. Never override these in section files.
   ────────────────────────────────────────────────────────────────────────── */

/* Editorial mono — Geist Mono — gives the project a contemporary,
   exclusive technical voice for navigation, colophon, meta labels.
   JetBrains Mono is the general-purpose mono fallback. */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* ── PAPER (light surfaces) ── */
  --paper:        #F5F4F0;
  --surface:      #EFEDE9;
  --surface-2:    #E5E3DE;
  --surface-3:    #D9D6CF;

  /* ── INK (text on paper) ── */
  --ink:          #0E0E0D;   /* primary text */
  --ink-mid:      #5C5C58;   /* secondary text — passes WCAG AA on paper */
  --ink-light:    #7A7A74;   /* tertiary — passes AA at 14px+ on paper */
  --ink-ghost:    #A8A8A2;   /* meta, dividers — minimum readable */

  /* ── DARK STAGE (when chart bg = ink) ── */
  --stage:        #0E0E0D;
  --stage-2:      #161614;
  --stage-deep:   #080807;

  /* Foreground on dark — readable hierarchy */
  --on-ink-strong: rgba(245,244,240,0.95);
  --on-ink:        rgba(245,244,240,0.78);
  --on-ink-mid:    rgba(245,244,240,0.62);
  --on-ink-soft:   rgba(245,244,240,0.48);  /* min for readable copy */
  --on-ink-meta:   rgba(245,244,240,0.55);  /* eyebrow / source / counter */
  --on-ink-grid:   rgba(245,244,240,0.16);  /* grid lines / dividers */
  --on-ink-faint:  rgba(245,244,240,0.10);  /* very faint scaffolding */

  /* ── SEMANTIC COLOR CODEX ──
     The palette of the project. Every chart, every section, every dataset
     uses ONLY these encodings. No exceptions.

       --c-victims  red       → conflict deaths, civilian casualties, fatalities
       --c-exile    amber     → displacement, refugees, exile, people in waiting
       --c-power    blue-gray → military spending, state capacity, force
       --c-food     green     → food, supplies, fertiliser, civilian aid
       --c-energy   ochre     → energy, fuel, gas, oil prices
       --c-wages    plum      → wages, real income, household economy

     If a dataset doesn't fit one of these, use --ink (neutral) — never
     invent a new hue mid-section.
     ──────────────────────────────────────────────────────── */
  --c-victims:    #C0392B;   /* red */
  --c-exile:      #B5620A;   /* amber — refugees ALWAYS amber */
  --c-power:      #4A5568;   /* blue-gray */
  --c-food:       #3A5C3A;   /* dark green */
  --c-energy:     #8B5A2B;   /* warm ochre — distinct from amber */
  --c-wages:      #5C4A6E;   /* muted plum */

  /* Tint variants for charts */
  --c-victims-soft: rgba(192, 57, 43, 0.85);
  --c-exile-soft:   rgba(181, 98, 10, 0.85);
  --c-power-soft:   rgba(74, 85, 104, 0.85);
  --c-food-soft:    rgba(58, 92, 58, 0.85);
  --c-energy-soft:  rgba(139, 90, 43, 0.85);
  --c-wages-soft:   rgba(92, 74, 110, 0.85);

  /* ── TYPOGRAPHY ──
     Display:  Cormorant Garamond — editorial serif, the voice of the project
     Body:     DM Sans — neutral, legible
     Mono:     JetBrains Mono — technical, precise (general use)
     Editorial mono: Geist Mono — for navigation, colophon, section labels;
                     gives the "exclusive / Claude-feel" the project asks for
     ──────────────────────────────────────────────────────── */
  --f-display:  'Cormorant Garamond', 'Newsreader', Georgia, serif;
  --f-body:     'DM Sans', system-ui, sans-serif;
  --f-mono:     'JetBrains Mono', 'DM Mono', ui-monospace, monospace;
  --f-editorial:'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  /* legacy aliases — keep so existing sections don't break */
  --f-d: var(--f-display);
  --f-b: var(--f-body);
  --f-m: var(--f-mono);

  /* ── MOTION ── */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --t-fast:     0.18s;
  --t-base:     0.4s;
  --t-slow:     0.8s;

  /* ── LAYOUT ── */
  --side:    56px;
  --max-w:   1240px;
  --nav-h:   56px;

  /* ── Z-LAYERS ── */
  --z-progress: 400;
  --z-nav:      300;
  --z-rail:     250;
  --z-tip:      500;
  --z-overlay:  10;

  /* legacy aliases used in older sections */
  --red: var(--c-victims);
}

/* ── REDUCE MOTION RESPECT ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── KEYBOARD FOCUS — visible across whole project ── */
:focus-visible {
  outline: 2px solid var(--c-victims);
  outline-offset: 3px;
}