/**
 * Design tokens.
 *
 * Every colour, space, radius and shadow in the application resolves to one of
 * these. The legacy stylesheet hard-coded values inline in ~3,200 lines with the
 * same greys spelled six different ways, which is why the panel drifted visually
 * from section to section.
 *
 * Dark is the primary theme (this is an operational display, usually run for long
 * periods). Light is a real variant, not an afterthought.
 */

:root {
  color-scheme: dark;

  /* ---- Surfaces: raised in steps, never arbitrary ---- */
  --surface-0: #070a10;   /* app background, behind the map */
  --surface-1: #0d1219;   /* panels, top bar */
  --surface-2: #141b25;   /* cards inside panels */
  --surface-3: #1c2532;   /* inputs, hover states */
  --surface-4: #26313f;   /* pressed / active */

  --border-subtle: #1e2937;
  --border-strong: #2c3a4d;
  --border-focus: #38bdf8;

  /* ---- Text ---- */
  --text-primary: #e8edf5;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-inverse: #0b0f17;

  /* ---- Brand & accents ---- */
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-soft: rgba(56, 189, 248, 0.14);
  --accent-text: #7dd3fc;

  /* ---- Semantic ---- */
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --danger-strong: #ef4444;
  --info: #818cf8;

  /* Weather-domain accents, used by layer groups and the legend */
  --wx-radar: #38bdf8;
  --wx-satellite: #a78bfa;
  --wx-lightning: #fbbf24;
  --wx-severe: #f43f5e;
  --wx-outlook: #34d399;
  --wx-pressure: #94a3b8;

  /* ---- Typography ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Consolas, monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;

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

  /* ---- Space: a 4px scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Radii ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

  /* ---- Layout ---- */
  --rail-width: 56px;
  --panel-width: 336px;
  --topbar-height: 48px;
  --timeline-height: 88px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ---- Stacking (above Leaflet's own panes) ---- */
  --z-map: 1;
  --z-floating: 600;
  --z-rail: 700;
  --z-panel: 690;
  --z-topbar: 720;
  --z-timeline: 710;
  --z-modal: 900;
  --z-toast: 950;
}

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

  --surface-0: #eef1f6;
  --surface-1: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #eaeef4;
  --surface-4: #dde3ec;

  --border-subtle: #dde3ec;
  --border-strong: #c3ccda;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #7c8798;
  --text-inverse: #ffffff;

  --accent: #0284c7;
  --accent-strong: #0369a1;
  --accent-soft: rgba(2, 132, 199, 0.12);
  --accent-text: #0369a1;

  --ok: #059669;
  --warn: #b45309;
  --danger: #dc2626;
  --info: #4f46e5;

  --wx-radar: #0284c7;
  --wx-satellite: #7c3aed;
  --wx-lightning: #b45309;
  --wx-severe: #e11d48;
  --wx-outlook: #059669;
  --wx-pressure: #475569;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}