/* ── Design tokens ───────────────────────────────────────────────────
   The single source of truth for colour, spacing, type, radius and elevation.
   Colours were tokenised first (light/dark themes below); the space/type/radius/
   elevation scales were added in the Phase-A design-system pass, sized to absorb
   the values already in use across css/* rather than to invent new ones — so
   adopting a token is a like-for-like swap, not a redesign.
   RULE: components read these; don't hardcode px or hex in component CSS. */
:root{
  --navy:#1a2e44;--navy-dark:#111e2e;--navy-mid:#243B55;--navy-light:#2E4F6E;
  --teal:#1D9E75;--teal-dim:rgba(29,158,117,0.18);--teal-border:rgba(29,158,117,0.35);
  --blue:#1e57b8;--brand-grad:linear-gradient(90deg,var(--blue),var(--teal));
  --text:#fff;--text-muted:#A8BFD0;--text-dim:#7A9BB5;--text-faint:#4A6A85;
  /* Two line weights, not one. The design concept separates a CARD border from an
     internal separator, and collapsing them is what makes every chip read as hard
     as the card it sits in. --divider-soft is the concept's --line-soft.
     --inset is the recessed fill under a search box, a chip, or a group header:
     the concept runs a four-level ladder (ground > surface > raised > inset) and
     the app previously had no bottom rung, so recessed things sat flat. */
  --divider:#28405A;--divider-soft:#20344B;--inset:#0F1D2B;
  --red-bg:#2A1515;--red:#F09595;--red-dim:rgba(240,149,149,0.15);
  --red-border:rgba(240,149,149,0.3);--amber:#EF9F27;--amber-dim:rgba(239,159,39,0.16);
  --amber-border:rgba(239,159,39,0.4);--green:#7DD9B0;--green-bg:#1A2E1A;
  --surface-tint:rgba(255,255,255,0.05);--glass-bg:rgba(36,59,85,0.90);
  --font:'Avenir Next','Segoe UI',Arial,sans-serif;--radius:6px;--sw:550px;

  /* Spacing — a 2px-based rhythm. Prefer the even steps; the odd ones exist
     because the current UI is tuned to them (compact rows, tight tool panels). */
  --s1:4px;--s2:6px;--s3:8px;--s4:10px;--s5:12px;--s6:14px;--s7:16px;
  --s8:20px;--s9:24px;--s10:32px;

  /* Type — named for role. --t-sm (11px) is the workhorse UI size; --t-base
     (12px) is body/controls. Half-pixel sizes in the old CSS collapse onto these. */
  /* Trimmed ~1px from --t-base upward to match the concept's lighter typographic weight.
     The bottom three are deliberately unchanged: at 8-10px they are already at the limit of
     comfortable reading, and shrinking them would cost legibility rather than refine anything.
     360 rules consume this scale, so it is the single lever for site-wide consistency —
     resize here, never per-component. */
  --t-3xs:8px;--t-2xs:9px;--t-xs:10px;--t-sm:11px;--t-base:11.5px;--t-md:12px;
  --t-lg:13px;--t-xl:14px;--t-2xl:17px;--t-3xl:24px;

  /* Radius — --radius (6px) stays the default for back-compat with existing rules. */
  --r-xs:3px;--r-sm:4px;--r-md:5px;--r-lg:8px;--r-xl:10px;--r-2xl:14px;--r-pill:999px;

  /* Elevation — e1 subtle … e5 modal. Re-themed for light mode below, where
     heavy black shadows read as dirt rather than depth. */
  --e1:0 1px 4px rgba(0,0,0,.2);
  --e2:0 2px 10px rgba(0,0,0,.3);
  --e3:0 8px 24px rgba(0,0,0,.45);
  --e4:0 10px 34px rgba(0,0,0,.55);
  --e5:0 24px 70px rgba(0,0,0,.6)
}
/* Light theme — same token names, re-themed values. Toggled via #theme-toggle,
   applies to the whole app (including modals/overlays like Welcome and the map
   composer, which live outside #app in the DOM but still inherit from :root). */
:root[data-theme="light"]{
  --navy:#ffffff;--navy-dark:#EEF2F6;--navy-mid:#F3F6F9;--navy-light:#E4EAF0;
  --text:#16232F;--text-muted:#1E2C38;--text-dim:#33465A;--text-faint:#55697D;
  /* WAS #AAB8C4 — two shades harder than the concept, and the single biggest
     reason light mode read as boxes. Every card, input and chip in the app is
     outlined with this token (230 uses), so it set the whole character. */
  --divider:#D3DDE6;--divider-soft:#E2E9F0;--inset:#EAEFF4;
  --red-bg:#FCEBEA;--red:#C0392B;--red-dim:rgba(192,57,43,0.10);
  --red-border:rgba(192,57,43,0.30);--amber:#9A6300;--amber-dim:rgba(154,99,0,0.10);
  --amber-border:rgba(154,99,0,0.30);--green:#1F7A4D;--green-bg:#E9F5EA;
  --teal-dim:rgba(29,158,117,0.12);--surface-tint:rgba(16,35,47,0.045);--glass-bg:rgba(255,255,255,0.82);
  /* Softer, cooler shadows — same depth ladder, appropriate for a light ground. */
  --e1:0 1px 3px rgba(20,40,60,.10);
  --e2:0 2px 8px rgba(20,40,60,.12);
  --e3:0 8px 22px rgba(20,40,60,.16);
  --e4:0 10px 30px rgba(20,40,60,.18);
  --e5:0 24px 60px rgba(20,40,60,.22)
}
/* The sign-in gate and post-login splash are a fixed branded moment, not part of
   the in-app theme — pin them back to the dark palette even when light mode is on. */
[data-theme="light"] #authGate, [data-theme="light"] #loading{
  --navy:#1a2e44;--navy-dark:#111e2e;--navy-mid:#243B55;--navy-light:#2E4F6E;
  --text:#fff;--text-muted:#A8BFD0;--text-dim:#7A9BB5;--text-faint:#4A6A85;
  --divider:#2A3F57;--red-bg:#2A1515;--red:#F09595;--red-dim:rgba(240,149,149,0.15);
  --red-border:rgba(240,149,149,0.3);--amber:#EF9F27;--green-bg:#1A2E1A;
  --teal-dim:rgba(29,158,117,0.18);--surface-tint:rgba(255,255,255,0.05);
  --e1:0 1px 4px rgba(0,0,0,.2);--e2:0 2px 10px rgba(0,0,0,.3);
  --e3:0 8px 24px rgba(0,0,0,.45);--e4:0 10px 34px rgba(0,0,0,.55);
  --e5:0 24px 70px rgba(0,0,0,.6)
}