/* ============================================================================
   CyberMap — design tokens ("Field Atlas"). Loads before styles.css, which consumes these.
   Light paper is the default; dark is a warm graphite, chosen by the system setting or by
   js/theme.js (data-theme on <html>). Print always uses the light values: the dark blocks
   are screen-only.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-wdth-wght.woff2') format('woff2');
}
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-600.woff2') format('woff2'); }

:root {
  color-scheme: light;

  /* Surfaces: paper, cards, hairlines */
  --bg:          #F4F3EE;
  --bg-elev:     #FBFAF7;
  --bg-elev-2:   #EEECE5;
  --panel:       #F4F3EE;
  --border:      #E1DFD7;
  --border-2:    #C9C6BC;
  --text:        #16181D;
  --text-dim:    #4A4D55;
  --text-faint:  #5E6169;
  --on-ink:      #FBFAF7;   /* text on an ink-filled button */

  /* Blue marks anything layered on the official rating (lens, live signals) and every link. */
  --accent:      #2742C8;
  --accent-dim:  #9AA8E6;
  --accent-tint: #E6E9F7;
  --live:        var(--accent);

  /* Status colours, never reused as bands */
  --ok:          #2F6B3F;
  --danger:      #A3261B;
  --warn:        #8A5A00;

  /* Map */
  --ocean:       #FBFAF7;
  --land:        #E4E2DB;   /* filtered out / no feature data */
  --land-stroke: #FBFAF7;
  --graticule:   #E6E4DD;
  --hatch:       var(--unrated);   /* disputed hatching: the not-yet-rated grey, striped over the band */
  --map-hover:   #16181D;

  /* CCR bands: one hue (OKLCH h≈36), darker and more saturated with risk, so the 130 Medium
     countries stay calm and the High/Extreme ones carry the map. Validated with the dataviz
     skill's validate_palette.js --ordinal on --bg: monotone lightness, adjacent ΔL ≥ 0.06,
     light end 2.07:1, hue spread 1°. A band is never shown by colour alone (name and number
     always accompany it), and its text is ink, not the band colour. Bands apply to CCR only. */
  --band-1: #C1A59D;  --band-2: #B68477;  --band-3: #AD614C;  --band-4: #A02F0B;  --band-5: #631500;
  --band-1-text: var(--text); --band-2-text: var(--text); --band-3-text: var(--text); --band-4-text: var(--text); --band-5-text: var(--text);
  --band-1-bg: transparent;   --band-2-bg: transparent;   --band-3-bg: transparent;   --band-4-bg: transparent;   --band-5-bg: transparent;
  /* Not yet rated: a cool grey, never a band colour */
  --unrated: #D6D6D2;  --unrated-text: var(--text-dim);  --unrated-bg: transparent;
  --unrated-dot: rgba(22, 24, 29, 0.28);

  /* PCR, ICR, pillars and indicators: ink, length or position carries the value */
  --measure:       #4A4D55;
  --measure-track: #E1DFD7;
  --average:        #8A8C93;

  /* Logo: the bottom band is the risk */
  --mark-risk: #A02F0B;

  /* Type */
  --font:      'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Shape and motion */
  --radius: 6px;
  --shadow: 0 10px 30px rgba(22, 24, 29, 0.12), 0 1px 3px rgba(22, 24, 29, 0.08);
  --ease:   160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Dark: warm graphite, not black. The band ramp flips its anchor (low risk recedes into the
   ground, high risk is brightest), validated the same way on #1D1C1A: light end 2.07:1. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1D1C1A; --bg-elev: #262523; --bg-elev-2: #2F2D2A; --panel: #1D1C1A;
    --border: #34322F; --border-2: #4A4844;
    --text: #F1EEE9; --text-dim: #B8B4AD; --text-faint: #9F9A93; --on-ink: #1D1C1A;
    --accent: #859FF6; --accent-dim: #4A5A9C; --accent-tint: #252B45;
    --ok: #7FC690; --danger: #FF8E80; --warn: #E8B860;
    --ocean: #222120; --land: #34322F; --land-stroke: #222120; --graticule: #2C2A28;
    --map-hover: #F1EEE9;
    --band-1: #5F4A44; --band-2: #825B50; --band-3: #AC6957; --band-4: #E16F50; --band-5: #FE987C;
    --unrated: #3A3A3C; --unrated-dot: rgba(241, 238, 233, 0.25);
    --measure: #B8B4AD; --measure-track: #3B3936; --average: #8F8B84;
    --mark-risk: #E16F50;
    --shadow: 0 12px 34px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1D1C1A; --bg-elev: #262523; --bg-elev-2: #2F2D2A; --panel: #1D1C1A;
    --border: #34322F; --border-2: #4A4844;
    --text: #F1EEE9; --text-dim: #B8B4AD; --text-faint: #9F9A93; --on-ink: #1D1C1A;
    --accent: #859FF6; --accent-dim: #4A5A9C; --accent-tint: #252B45;
    --ok: #7FC690; --danger: #FF8E80; --warn: #E8B860;
    --ocean: #222120; --land: #34322F; --land-stroke: #222120; --graticule: #2C2A28;
    --map-hover: #F1EEE9;
    --band-1: #5F4A44; --band-2: #825B50; --band-3: #AC6957; --band-4: #E16F50; --band-5: #FE987C;
    --unrated: #3A3A3C; --unrated-dot: rgba(241, 238, 233, 0.25);
    --measure: #B8B4AD; --measure-track: #3B3936; --average: #8F8B84;
    --mark-risk: #E16F50;
    --shadow: 0 12px 34px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}