/* ────────────────────────────────────────────────────────────────────────── 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 → CIVILIANS TARGETED ONLY. Never used for total deaths, combatants, or generic fatalities. Red is rare on purpose: when you see it, a non-combatant has been killed. --c-exile purple → displacement, refugees, exile, people in waiting --c-power navy → military spending, state capacity, force --c-food gold → food, supplies, fertiliser, civilian aid (wheat) --c-energy green → energy, fuel, gas, oil prices --c-wages slate → wages, real income, household economy Total conflict deaths (combatants + civilians) are encoded in NEUTRAL INK via --c-fatal (= var(--on-ink-strong) on dark stage, var(--ink) on paper). They do not get a hue. The hue is reserved for the editorial signal — the civilians. Hue spacing on the wheel: red (6°), gold (40°), green (131°), navy (213°), purple (272°), slate (neutral). All six are distinct in normal vision; the codex pill always carries the textual label so deuteranopic readers can disambiguate the warm-warm and cool-cool pairings. If a dataset doesn't fit one of these, use --ink (neutral) — never invent a new hue mid-section. ──────────────────────────────────────────────────────── */ --c-victims: #C0392B; /* red — civilians targeted only */ --c-power: #2C5282; /* navy */ --c-exile: #6B4A8A; /* purple — refugees ALWAYS purple */ --c-food: #C28A2B; /* gold-wheat */ --c-energy: #2D7C3F; /* green — fuel / energy */ --c-wages: #6D6E72; /* cool slate */ /* Semantic neutral for total fatalities (NOT a hue, encoded as ink) */ --c-fatal: var(--ink); /* on paper */ --c-fatal-on-dark: var(--on-ink-strong); /* on dark stage */ /* Tint variants for charts */ --c-victims-soft: rgba(192, 57, 43, 0.85); --c-power-soft: rgba( 44, 82, 130, 0.85); --c-exile-soft: rgba(107, 74, 138, 0.85); --c-food-soft: rgba(194, 138, 43, 0.85); --c-energy-soft: rgba( 45, 124, 63, 0.85); --c-wages-soft: rgba(109, 110, 114, 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 — kept for back-compat ONLY. New code must NOT use --red as a synonym for fatalities; it remains bound to --c-victims (civilians targeted). */ --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 ── NOT red: red is reserved for civilians. Focus uses neutral ink. */ :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* ── BRAND WORDMARK ───────────────────────────────────── "Coralit\x" lockup. The backslash is the same glyph weight as the rest of the word but desaturated (opacity 0.28) so it reads as a typographic mark, not as code syntax. The "x" is italic. Scales 1.6× the surrounding text (or use an inline font-size in the nav logo) so the serif wordmark stays legible inside 10px mono contexts and reads as the dominant element of the lockup. */ .c-wordmark { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.6em; letter-spacing: -0.005em; line-height: 1; color: currentColor; display: inline-block; vertical-align: -0.1em; white-space: nowrap; text-transform: none; font-style: normal; } .c-wordmark .c-slash { display: inline-block; font-weight: 400; font-style: normal; color: currentColor; opacity: 0.28; margin: 0 -0.04em; } .c-wordmark .c-x { font-style: italic; }