/* Ostracon tokens, generated from tokens.json. Version 1, 1 November 2026. */
/* Site copy: the Google Fonts import is removed. Fonts are self-hosted in css/fonts.css. */

:root {
  color-scheme: dark;
  --bg: #08090a; /* App and page background. */
  --surface-1: #141615; /* Cards and panels: KPI cards, trend cards, results cards. */
  --surface-2: #1c1f1e; /* Selected tab, selected card, inputs, bar tracks. */
  --glass: rgba(36, 40, 38, 0.62); /* Cards and controls floating over the map or photos, always with blur-glass and shadow-glass. */
  --line: #262a28; /* Card borders over the map, dividers, chip outlines. */
  --line-strong: #3a403d; /* Control borders and focus rings. */
  --ink: #eceeea; /* Primary text and numerals. */
  --ink-muted: #9ba29e; /* Secondary text and metadata. 4.5:1 or better on bg, surface-1, surface-2 and warn-surface. */
  --ink-faint: #5e6561; /* Decimals and units after big numerals, axis ticks, step numbers. Not for body text. */
  --accent: #c9e59a; /* Pale lime. The live mission, the selected map area, AI-generated content and the AI label. Once or twice per screen. */
  --accent-ink: #11160a; /* Text and icons on accent fills. */
  --signal-live: #5ec557; /* Operational: live, online, acted, healthy channel. */
  --signal-warn: #f39444; /* Attention: needs review, guardrail warnings, manual or self-reported data. */
  --signal-threat: #ff4747; /* Critical: opponent bait, failed delivery, counts on alert badges. Text on it uses on-signal. */
  --signal-info: #86a8ff; /* Mirror recommendations and neutral annotations. */
  --on-signal: #08090a; /* Text on signal-threat, signal-warn and signal-live fills (badges, dots). White on red fails contrast. */
  --warn-surface: #2e2421; /* Warning and opponent-bait cards: the problem, then the recommendation. */
  --map-land: #121614; /* Land fill on the supporter map. */
  --map-edge: rgba(236, 238, 234, 0.55); /* Country and region outlines. */
  --topo: rgba(201, 229, 154, 0.07); /* Terrain lines inside the map and on website terrain graphics. */
  --topo-peak: #4f6b3c; /* Highest terrain levels on website graphics. */
  --duotone: #3c6b45; /* Colour layer for secondary editorial photos on the website. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --space-7: 28px;
  --space-12: 48px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --shadow-glass: 0 18px 40px rgba(0, 0, 0, 0.4);
  --blur-glass: 22px;
  --font-display: Outfit, "Helvetica Neue", Arial, sans-serif;
  --font-text: Outfit, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
}

body { background: var(--bg); color: var(--ink); font-family: var(--font-text); font-weight: 300; }

.display-xl { font-family: var(--font-display); font-size: 108px; line-height: 0.96; font-weight: 200; letter-spacing: -0.035em; }
.page-title { font-family: var(--font-display); font-size: 40px; line-height: 1.05; font-weight: 200; letter-spacing: -0.02em; }
.kpi { font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 200; letter-spacing: -0.02em; }
.kpi-s { font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 200; }
.card-title { font-family: var(--font-text); font-size: 16px; line-height: 20px; font-weight: 400; }
.panel-title { font-family: var(--font-text); font-size: 20px; line-height: 26px; font-weight: 300; }
.body { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 300; }
.ui { font-family: var(--font-text); font-size: 14px; line-height: 18px; font-weight: 400; }
.meta { font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 300; }
.step { font-family: var(--font-text); font-size: 11px; line-height: 14px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; }
.id { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; }