/**
 * STORMSCAPE — Design tokens
 *
 * One source of truth for colour, type, space, motion and elevation.
 * Nothing downstream hardcodes a hex value or a duration.
 *
 * Palette rationale: the neutrals are sampled from storm photography — a deep
 * blue-cyan cast rather than a neutral grey, because real storm light is cold.
 * Accents are deliberately few. Gold marks "active/live", amber and ember mark
 * escalating hazard, teal is the cool informational counterpoint. Colour here
 * always means something; it is never decoration.
 */

:root {
  /* ---------------------------------------------------------------------- */
  /* Raw palette — referenced by the semantic tokens below, never used direct */
  /* ---------------------------------------------------------------------- */

  /* Storm neutrals, coldest to warmest */
  --slate-1000: #06090d;
  --slate-950: #0a0e13;
  --slate-900: #0e131a;
  --slate-850: #131922;
  --slate-800: #18202b;
  --slate-750: #1e2733;
  --slate-700: #26313f;
  --slate-600: #35424f;
  --slate-500: #4a5866;
  --slate-400: #6b7885;
  --slate-300: #8f9ba8;
  --slate-200: #b6c0ca;
  --slate-100: #d8dfe6;
  --slate-50: #eef2f6;
  --white: #ffffff;

  /* Accents */
  --gold-600: #b8862f;
  --gold-500: #d69f3c;
  --gold-400: #e9b44c;
  --gold-300: #f2c76f;

  --amber-500: #c26a26;
  --amber-400: #d97a33;
  --amber-300: #e79554;

  --ember-500: #a83a26;
  --ember-400: #c4462f;
  --ember-300: #d96448;

  --teal-500: #3d8b8e;
  --teal-400: #4ea5a8;
  --teal-300: #6fbfc1;

  /* ---------------------------------------------------------------------- */
  /* Typography                                                              */
  /* ---------------------------------------------------------------------- */

  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', system-ui, sans-serif;

  /* Type scale — 1.2 minor third, tuned so adjacent steps stay distinguishable
     at small sizes where most of this UI lives. */
  --text-2xs: 0.6875rem; /* 11px — axis ticks, unit suffixes */
  --text-xs: 0.75rem; /* 12px — labels, captions */
  --text-sm: 0.8125rem; /* 13px — control text, body in panels */
  --text-base: 0.9375rem; /* 15px — primary body */
  --text-md: 1.0625rem; /* 17px — panel headings */
  --text-lg: 1.375rem; /* 22px */
  --text-xl: 1.875rem; /* 30px */
  --text-2xl: 2.5rem; /* 40px */
  --text-3xl: 3.5rem; /* 56px */
  --text-4xl: clamp(2.75rem, 7vw, 5.5rem); /* hero wordmark */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Optical letter-spacing: tighten as size grows, open up for small caps. */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.16em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------------------------------------------------------------------- */
  /* Space — 4px base                                                        */
  /* ---------------------------------------------------------------------- */

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ---------------------------------------------------------------------- */
  /* Radii — soft, never pill-shaped except for explicit toggles             */
  /* ---------------------------------------------------------------------- */

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ---------------------------------------------------------------------- */
  /* Motion                                                                  */
  /* ---------------------------------------------------------------------- */

  /* Decelerating curves for things entering; things leaving accelerate out. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* A slight overshoot — used sparingly, on tactile controls only. */
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);

  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-normal: 240ms;
  --duration-slow: 420ms;
  --duration-slower: 720ms;
  --duration-cinematic: 1600ms;

  /* ---------------------------------------------------------------------- */
  /* Layout                                                                  */
  /* ---------------------------------------------------------------------- */

  --rail-width: 320px;
  --panel-width: 372px;
  --topbar-height: 60px;
  --timeline-height: 92px;
  --z-map: 1;
  --z-map-overlay: 10;
  --z-panel: 20;
  --z-topbar: 30;
  --z-sheet: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* ========================================================================== */
/* DARK THEME (default)                                                       */
/* ========================================================================== */

:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  /* Surfaces, back to front */
  --bg-void: var(--slate-1000);
  --bg-base: var(--slate-950);
  --bg-raised: var(--slate-900);
  --bg-panel: rgba(14, 19, 26, 0.82);
  --bg-panel-solid: var(--slate-900);
  --bg-inset: var(--slate-1000);
  --bg-control: var(--slate-850);
  --bg-control-hover: var(--slate-800);
  --bg-control-active: var(--slate-750);
  --bg-scrim: rgba(6, 9, 13, 0.72);

  /* Hairlines. Two weights: structural dividers and softer internal rules. */
  --border-strong: rgba(214, 226, 238, 0.16);
  --border: rgba(214, 226, 238, 0.1);
  --border-soft: rgba(214, 226, 238, 0.06);

  /* The 1px top highlight that gives panels their lit-edge, glassy read. */
  --edge-highlight: rgba(255, 255, 255, 0.07);

  /* Text */
  --text-primary: var(--slate-50);
  --text-secondary: var(--slate-300);
  --text-tertiary: var(--slate-400);
  --text-disabled: var(--slate-500);
  --text-inverse: var(--slate-950);

  /* Accents */
  --accent: var(--gold-400);
  --accent-hover: var(--gold-300);
  --accent-muted: rgba(233, 180, 76, 0.16);
  --accent-border: rgba(233, 180, 76, 0.42);
  --accent-text: var(--gold-300);

  --info: var(--teal-400);
  --info-muted: rgba(78, 165, 168, 0.15);
  --info-text: var(--teal-300);

  --warn: var(--amber-400);
  --warn-muted: rgba(217, 122, 51, 0.16);
  --warn-text: var(--amber-300);

  --danger: var(--ember-400);
  --danger-muted: rgba(196, 70, 47, 0.18);
  --danger-text: var(--ember-300);

  /* Focus ring — must clear both dark panels and bright satellite imagery,
     hence the pairing of a light ring with a dark outer halo. */
  --focus-ring: var(--gold-300);
  --focus-halo: rgba(6, 9, 13, 0.9);

  /* Elevation. Dark UI reads depth from contrast against the void plus a lit
     top edge, so shadows stay wide and soft rather than dark and tight. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.46), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 28px 80px rgba(0, 0, 0, 0.58), 0 4px 16px rgba(0, 0, 0, 0.34);

  --panel-blur: 22px;
  --panel-saturate: 1.3;

  /* Sky tints used by the map's atmosphere and the ambient scene wash. */
  --sky-day: #7d9dbb;
  --sky-storm: #3d4854;
  --sky-dusk: #6b5a5f;
  --sky-night: #10161f;
}

/* ========================================================================== */
/* LIGHT THEME                                                                */
/* ========================================================================== */
/* Not a naive inversion. The map stays dark and cinematic in both themes, so
   light mode lifts the chrome to a cool paper-white and keeps the same accents
   at slightly deeper values to hold contrast on light surfaces. */

:root[data-theme='light'] {
  color-scheme: light;

  --bg-void: #dfe4ea;
  --bg-base: #eef1f5;
  --bg-raised: #f7f9fb;
  --bg-panel: rgba(250, 251, 253, 0.86);
  --bg-panel-solid: #f7f9fb;
  --bg-inset: #e6eaef;
  --bg-control: #ffffff;
  --bg-control-hover: #f0f3f7;
  --bg-control-active: #e4e9ef;
  --bg-scrim: rgba(226, 231, 238, 0.76);

  --border-strong: rgba(20, 32, 46, 0.2);
  --border: rgba(20, 32, 46, 0.12);
  --border-soft: rgba(20, 32, 46, 0.07);
  --edge-highlight: rgba(255, 255, 255, 0.9);

  --text-primary: #101720;
  --text-secondary: #47535f;
  --text-tertiary: #67737f;
  --text-disabled: #97a1ac;
  --text-inverse: #f7f9fb;

  --accent: var(--gold-600);
  --accent-hover: #9c7026;
  --accent-muted: rgba(184, 134, 47, 0.14);
  --accent-border: rgba(184, 134, 47, 0.45);
  --accent-text: #8a6522;

  --info: var(--teal-500);
  --info-muted: rgba(61, 139, 142, 0.13);
  --info-text: #2f6d70;

  --warn: var(--amber-500);
  --warn-muted: rgba(194, 106, 38, 0.13);
  --warn-text: #9c5219;

  --danger: var(--ember-500);
  --danger-muted: rgba(168, 58, 38, 0.13);
  --danger-text: #8c2e1e;

  --focus-ring: #8a6522;
  --focus-halo: rgba(255, 255, 255, 0.95);

  --shadow-sm: 0 1px 2px rgba(16, 23, 32, 0.08);
  --shadow-md: 0 4px 16px rgba(16, 23, 32, 0.1), 0 1px 3px rgba(16, 23, 32, 0.06);
  --shadow-lg: 0 12px 40px rgba(16, 23, 32, 0.14), 0 2px 8px rgba(16, 23, 32, 0.07);
  --shadow-xl: 0 28px 80px rgba(16, 23, 32, 0.18), 0 4px 16px rgba(16, 23, 32, 0.08);

  --panel-blur: 20px;
  --panel-saturate: 1.6;
}

/* Respect the OS preference when the user has not chosen explicitly.
   Tokens are defined on bare :root above, so this only needs to override. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']):not([data-theme='light']) {
    color-scheme: light;

    --bg-void: #dfe4ea;
    --bg-base: #eef1f5;
    --bg-raised: #f7f9fb;
    --bg-panel: rgba(250, 251, 253, 0.86);
    --bg-panel-solid: #f7f9fb;
    --bg-inset: #e6eaef;
    --bg-control: #ffffff;
    --bg-control-hover: #f0f3f7;
    --bg-control-active: #e4e9ef;
    --bg-scrim: rgba(226, 231, 238, 0.76);

    --border-strong: rgba(20, 32, 46, 0.2);
    --border: rgba(20, 32, 46, 0.12);
    --border-soft: rgba(20, 32, 46, 0.07);
    --edge-highlight: rgba(255, 255, 255, 0.9);

    --text-primary: #101720;
    --text-secondary: #47535f;
    --text-tertiary: #67737f;
    --text-disabled: #97a1ac;
    --text-inverse: #f7f9fb;

    --accent: var(--gold-600);
    --accent-hover: #9c7026;
    --accent-muted: rgba(184, 134, 47, 0.14);
    --accent-border: rgba(184, 134, 47, 0.45);
    --accent-text: #8a6522;

    --info: var(--teal-500);
    --info-muted: rgba(61, 139, 142, 0.13);
    --info-text: #2f6d70;

    --warn: var(--amber-500);
    --warn-muted: rgba(194, 106, 38, 0.13);
    --warn-text: #9c5219;

    --danger: var(--ember-500);
    --danger-muted: rgba(168, 58, 38, 0.13);
    --danger-text: #8c2e1e;

    --focus-ring: #8a6522;
    --focus-halo: rgba(255, 255, 255, 0.95);

    --shadow-sm: 0 1px 2px rgba(16, 23, 32, 0.08);
    --shadow-md: 0 4px 16px rgba(16, 23, 32, 0.1), 0 1px 3px rgba(16, 23, 32, 0.06);
    --shadow-lg: 0 12px 40px rgba(16, 23, 32, 0.14), 0 2px 8px rgba(16, 23, 32, 0.07);
    --shadow-xl: 0 28px 80px rgba(16, 23, 32, 0.18), 0 4px 16px rgba(16, 23, 32, 0.08);

    --panel-saturate: 1.6;
  }
}

/* ========================================================================== */
/* HAZARD SCALE                                                               */
/* ========================================================================== */
/* A single ordered ramp used everywhere severity is expressed — EF badges,
   hazard rings, metric bars, scenario notes. Keeping one ramp means a colour
   always carries the same meaning across the whole app. */

:root {
  --sev-0: var(--teal-400);
  --sev-1: #86ab72;
  --sev-2: var(--gold-400);
  --sev-3: var(--amber-400);
  --sev-4: var(--ember-400);
  --sev-5: #8e2f5f;
}

/* ========================================================================== */
/* REDUCED MOTION                                                             */
/* ========================================================================== */
/* Collapse durations at the token level so every consumer inherits it without
   needing its own media query. Individual components additionally disable
   ambient loops and flashing. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-cinematic: 0ms;
  }
}