/* tokens.css — Stradl / ImpactForce application UI
 * Themeable: Light / Dark / Auto. Map-first. Brand values from the official guide.
 *
 * THEME RESOLUTION
 *   - Dark is the product default (declared in :root).
 *   - [data-theme="light"] / [data-theme="dark"] force a theme.
 *   - "Auto" should be resolved in JS (matchMedia) by setting data-theme to
 *     light|dark and updating on change — see DESIGN.md §2A.
 *   - The @media block at the bottom is a no-JS fallback for Auto/unset; delete
 *     it if you resolve Auto in JS (recommended, avoids duplicated values).
 *
 * Fonts:
 *   Satoshi  (UI/headings)  — https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap
 *   Poppins  (brand reg.)   — Google Fonts
 *   IBM Plex Mono (numerics)— Google Fonts
 */

:root {
  /* ===== THEME-INVARIANT ===== */

  /* Brand palette (exact, from guide) */
  --brand-navy:  #0A2D4D;
  --brand-blue:  #0D6EFD;
  --brand-teal:  #00B2A9;
  --brand-green: #5CCB3B;
  --brand-light: #E6ECEF;

  /* Reserved brand gradient (logo / splash / app-icon ONLY) */
  --brand-gradient: linear-gradient(120deg, #0D6EFD, #00B2A9, #5CCB3B);

  /* LSM sequential ramp (1 low -> 10 high). Data fill — same in both themes;
     raise choropleth opacity slightly in light mode if it washes out. */
  --lsm-1:  #0A2D4D;  --lsm-2:  #0E3E63;  --lsm-3:  #11507A;  --lsm-4:  #126E9A;
  --lsm-5:  #0E8E96;  --lsm-6:  #00B2A9;  --lsm-7:  #1FBE8C;  --lsm-8:  #3DC76A;
  --lsm-9:  #5CCB3B;  --lsm-10: #8FD96A;

  /* Typography */
  --font-ui:    'Satoshi', sans-serif;        /* UI / headings */
  --font-brand: 'Poppins', sans-serif;        /* brand-register headings */
  --font-data:  'IBM Plex Mono', monospace;   /* numerics, coords, IDs */
  --text-2xs: 11px; --lh-2xs: 14px;  --text-xs:  12px; --lh-xs:  16px;
  --text-sm:  13px; --lh-sm:  18px;  --text-base:14px; --lh-base:20px;
  --text-lg:  16px; --lh-lg:  22px;  --text-xl:  20px; --lh-xl:  26px;
  --data-xl:  28px; --lh-dxl: 32px;

  /* Spacing (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;

  /* Radius (nothing > 8px) */
  --radius-sm: 4px;  --radius-md: 6px;  --radius-lg: 8px;

  /* Layout dims */
  --topbar-h: 48px;  --rail-w: 56px;  --inspector-w: 360px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);  --dur-fast: 150ms;  --dur: 200ms;

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

  /* Surfaces */
  --surface-900: #06203A;   /* app background */
  --surface-800: #0A2D4D;   /* primary panel / sidebar (= brand navy) */
  --surface-700: #0F3A5E;   /* raised panel / popover */
  --surface-600: #16486F;   /* hover / input bg */
  --surface-500: #235680;   /* borders / dividers */

  /* Text */
  --text-primary:   #F0F4F7;
  --text-secondary: #9DB2C4;
  --text-muted:     #5E7892;

  /* Interactive (brand blue) */
  --accent:        #0D6EFD;
  --accent-hover:  #3D8BFF;
  --accent-muted:  rgba(13, 110, 253, 0.16);

  /* Status */
  --positive: #5CCB3B;
  --warning:  #E8A13A;
  --negative: #EF5C6B;

  /* Map semantics — dark basemap */
  --map-land:  #08263F;
  --map-water: #061B2E;
  --map-road:  #235680;
  --map-site:        #E6ECEF;                  /* light pin on dark basemap */
  --map-site-ring:   #0D6EFD;
  --map-cone-fill:   rgba(0, 178, 169, 0.18);
  --map-cone-stroke: #00B2A9;
  --map-worm:        #F2A93B;                   /* amber, off-palette */
  --map-worm-casing: #FFC766;
  --map-taxi-rank:   #B07BE0;                   /* violet, off-palette */

  /* Elevation */
  --border: 1px solid var(--surface-500);
  --shadow-panel:   none;
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ===== LIGHT THEME ===== */
:root[data-theme="light"] {
  /* Surfaces (roles preserved: 900 = canvas, 800 = panel, 500 = border) */
  --surface-900: #EDF1F5;   /* app background (light grey canvas) */
  --surface-800: #FFFFFF;   /* primary panel / sidebar */
  --surface-700: #FFFFFF;   /* raised / popover — lifted by --shadow-popover */
  --surface-600: #E7EDF3;   /* hover / input bg */
  --surface-500: #D3DCE5;   /* borders / dividers */

  /* Text */
  --text-primary:   #0A2D4D;   /* brand navy on light */
  --text-secondary: #44607C;
  --text-muted:     #7E94A8;

  /* Interactive */
  --accent:        #0D6EFD;
  --accent-hover:  #0B5ED7;    /* darker hover reads better on light */
  --accent-muted:  rgba(13, 110, 253, 0.10);

  /* Status (darkened for contrast on white) */
  --positive: #36A30C;
  --warning:  #C9821C;
  --negative: #DB3B4D;

  /* Map semantics — light basemap */
  --map-land:  #EAEFF4;
  --map-water: #D6E2EA;
  --map-road:  #C2CFDA;
  --map-site:        #0A2D4D;                   /* navy pin on light basemap */
  --map-site-ring:   #0D6EFD;
  --map-cone-fill:   rgba(0, 178, 169, 0.22);   /* slightly stronger on light */
  --map-cone-stroke: #008C85;                   /* darker teal so it holds */
  --map-worm:        #DA8420;                    /* darker amber */
  --map-worm-casing: #F2A93B;
  --map-taxi-rank:   #8E4FC4;                     /* darker violet */

  /* Elevation — light mode leans on shadow, not just borders */
  --shadow-panel:   0 1px 2px rgba(10,45,77,0.06), 0 1px 3px rgba(10,45,77,0.10);
  --shadow-popover: 0 8px 24px rgba(10,45,77,0.14);
}

/* No-JS fallback removed 2026-06-02. Auto is resolved in JS via
   the theme provider in /theme-loader.js (see DESIGN.md §2A). */

body {
  background: var(--surface-900);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 400;
}

/* All numbers tabular mono so columns align */
.num, .metric, td.num, [data-numeric] {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}