/* ISG Crime Stats — Design Tokens
   Two themes: 'green' (default) and 'blue' (alt). Toggle by setting
   data-theme="blue" on a parent of [data-isg]. Direction-specific overrides
   live in ui_kits/crime-tracker/index.html under [data-direction="A|B|C|D"]. */

/* Self-hosted fonts — removes the runtime dependency on Google's font CDN.
   Inter + JetBrains Mono are variable woff2 (latin + latin-ext subsets) in
   /fonts/, declared across the full weight axis. OFL-licensed; font-display:
   swap matches prior behavior. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

[data-isg] {
  /* ───── Surfaces (green / default) ───── */
  --bg-0: #07100C;            /* page */
  --bg-1: #11201B;            /* module surface (bumped +1 step for contrast) */
  --bg-2: #18302A;            /* hover / nested */
  --bg-3: #1F3D35;            /* active / pressed */

  /* ───── Borders ───── */
  --border-0: rgba(140, 255, 200, 0.08);   /* default rim */
  --border-1: rgba(140, 255, 200, 0.18);   /* hover */
  --border-shimmer-hi: rgba(140, 255, 200, 0.45);
  --border-shimmer-lo: rgba(140, 255, 200, 0.05);

  /* ───── Text ───── */
  --fg-0: #FFFFFF;
  --fg-1: rgba(255, 255, 255, 0.72);
  --fg-2: rgba(255, 255, 255, 0.50);
  --fg-3: rgba(255, 255, 255, 0.32);
  --fg-disabled: rgba(255, 255, 255, 0.20);

  /* Semantic text-color scale — alias of the --fg-* ramp.
     Use --text-* in component rules so intent reads as "text colour"
     rather than "foreground surface". Same values, clearer naming. */
  --text-0: var(--fg-0);   /* primary    */
  --text-1: var(--fg-1);   /* secondary  */
  --text-2: var(--fg-2);   /* muted — labels, headings */
  --text-3: var(--fg-3);   /* faint — counts, captions */

  /* ───── Accent (green primary) ───── */
  --accent: #3DDC97;
  --accent-soft: rgba(61, 220, 151, 0.18);
  --accent-glow: rgba(61, 220, 151, 0.30);
  --accent-deep: #1FA877;

  /* ───── Spotlight (radial bump on each Module/Panel) ───── */
  --spotlight-color: rgba(80, 220, 160, 0.10);

  /* ───── Penal-class / priority ramps — single source of truth ─────
     Used by every incident/call severity indicator: list bars, detail
     side bar, legend dots (css/app.css) and the map pins (js/map.js
     reads these via getComputedStyle). Change a color here and it
     updates everywhere. NOTE: distinct from the category ramp below —
     different palette.
     Two native scales. Incidents: penal-class rank 0–8
     (0 = NA "No Offense" / undecodable — neutral, the old sev-0 role).
     Calls: dispatch priority 1–4 (1 = most urgent). */
  --pc-0: #5A5E5C;   /* gray    — NA / no class */
  --pc-1: #2C6DB5;   /* deep blue — MC / M*     */
  --pc-2: #5BA8FF;   /* blue      — MB          */
  --pc-3: #36D97B;   /* green     — MA          */
  --pc-4: #FFE03B;   /* yellow    — FS / F*     */
  --pc-5: #FFB020;   /* amber     — F3          */
  --pc-6: #E06820;   /* orange    — F2          */
  --pc-7: #C4301C;   /* red       — F1          */
  --pc-8: #A80F0F;   /* deep red  — FX          */

  --pri-1: #A80F0F;  /* P1 most urgent */
  --pri-2: #E06820;
  --pri-3: #FFE03B;
  --pri-4: #5BA8FF;

  /* ───── Category ramp (used sparingly) ───── */
  --sev-violent:    #A80F0F;   /* deep red */
  --sev-property:   #F08C3A;   /* orange */
  --sev-disturb:    #E8C547;   /* yellow */
  --sev-suspicious: #5BA8FF;   /* blue */
  --sev-traffic:    #3DDC97;   /* green */
  --sev-other:      #8A9591;   /* muted */

  /* ───── Recency ───── */
  --rec-live:   #3DDC97;
  --rec-recent: #5BA8FF;
  --rec-cold:   rgba(255, 255, 255, 0.28);

  /* ───── Map (CARTO Dark Matter direction) ─────
     Basemap layer colors are read live by map-base.js styleBaseLayers(); the
     accent map elements (zones, cluster rings, boundaries) read --accent. The
     full set is redefined per-theme so the map recolors on a theme switch. */
  --map-land:          #050B09;   /* background, land */
  --map-landuse:       #07100C;   /* landuse */
  --map-landuse-2:     #060E0B;   /* landuse_overlay */
  --map-park:          #081410;   /* national_park */
  --map-water:         #000000;   /* water, waterway */
  --map-road:          #253C2E;   /* street / simple */
  --map-road-2:        #2A4638;   /* secondary / tertiary */
  --map-road-3:        #305040;   /* primary / motorway */
  --map-path:          #1A2C22;   /* path / pedestrian */
  --map-building:      #0A1812;   /* building fill */
  --map-building-edge: #0F2018;   /* building outline */
  --map-cluster-fill:  #0D1F17;   /* cluster orb fill (ring uses --accent) */
  --map-label:         rgba(255, 255, 255, 0.55);

  /* ───── Type ───── */
  --font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fs-12: 12px;  --lh-12: 16px;
  --fs-13: 13px;  --lh-13: 18px;
  --fs-14: 14px;  --lh-14: 20px;
  --fs-16: 16px;  --lh-16: 22px;
  --fs-18: 18px;  --lh-18: 26px;
  --fs-22: 22px;  --lh-22: 28px;
  --fs-28: 28px;  --lh-28: 34px;
  --fs-40: 40px;  --lh-40: 44px;

  /* Semantic tokens */
  --t-display:  700 var(--fs-40)/var(--lh-40) var(--font-ui);
  --t-h1:       600 var(--fs-28)/var(--lh-28) var(--font-ui);
  --t-h2:       600 var(--fs-22)/var(--lh-22) var(--font-ui);
  --t-h3:       600 var(--fs-18)/var(--lh-18) var(--font-ui);
  --t-body:     400 var(--fs-14)/var(--lh-14) var(--font-ui);
  --t-body-md:  500 var(--fs-14)/var(--lh-14) var(--font-ui);
  --t-small:    400 var(--fs-13)/var(--lh-13) var(--font-ui);
  --t-body-sm:  var(--t-small);                                  /* small body / popup text */
  --t-caption:  500 var(--fs-12)/var(--lh-12) var(--font-ui);
  --t-label-sm: 600 var(--fs-12)/var(--lh-12) var(--font-ui);    /* small uppercase section/legend/count labels */
  --t-panel-head: 400 var(--fs-16)/var(--lh-16) var(--font-ui);  /* panel titles — ZONES / ACTIVITY (uppercase, pure white) */
  --t-mono-sm:  500 var(--fs-12)/var(--lh-12) var(--font-mono);
  --t-mono:     500 var(--fs-13)/var(--lh-13) var(--font-mono);
  --t-data-lg:  600 var(--fs-28)/var(--lh-28) var(--font-mono);

  /* ───── Spacing ───── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;

  /* ───── Radii ───── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ───── Shadow / elevation ───── */
  --elev-1: 0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.4);
  --elev-2: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px -10px rgba(0,0,0,0.8);
  --elev-pop: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px -16px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.6);

  /* ───── Z-index / stacking order — single source of truth.
     Higher = closer to the viewer. Reference these instead of raw
     numbers so panels, popups and menus can't collide as new overlays
     are added. Values preserved from the original ad-hoc usage. */
  --z-base:     1;    /* normal positioned content (app shell, Module/Panel spotlight) */
  --z-decor:    3;    /* Module border rim (.isg-module::before) */
  --z-content:  4;    /* Module/Panel inner content, above its own decoration */
  --z-controls: 5;    /* map corner controls */
  --z-popover:  10;   /* map popups, list panels, heat controls */
  --z-panel:    20;   /* slide-in detail panels */
  --z-modal:    30;   /* full-screen module-expand popup (detail panel slides above it) */
  --z-menu:     50;   /* dropdown menus — top of the stack */

  /* Mobile breakpoint. NOTE: CSS @media cannot read custom properties — this is
     documentation only. The literal 768px lives in four places: the css/app.css
     mobile block, js/app.js matchMedia, and js/areas.js zonePad(). Keep all in sync. */
  --bp-mobile: 768px;

  /* ───── Motion ───── */
  --ease: cubic-bezier(.2,.8,.2,1);
  --d-fast: 120ms;
  --d-med:  220ms;
  --d-slow: 600ms;
  --d-shimmer: 14s;
}

/* ─── Blue alt theme ─── */
[data-isg][data-theme="blue"] {
  --bg-0: #060B14;
  --bg-1: #11203A;
  --bg-2: #182F54;
  --bg-3: #1F3D6E;

  --border-0: rgba(160, 200, 255, 0.08);
  --border-1: rgba(160, 200, 255, 0.18);
  --border-shimmer-hi: rgba(160, 200, 255, 0.45);
  --border-shimmer-lo: rgba(160, 200, 255, 0.05);

  --accent: #3D9BFF;
  --accent-soft: rgba(61, 155, 255, 0.18);
  --accent-glow: rgba(61, 155, 255, 0.30);
  --accent-deep: #1F6FCC;

  --spotlight-color: rgba(80, 160, 240, 0.12);

  --rec-live: #3D9BFF;

  --map-land:          #04080F;
  --map-landuse:       #070C16;
  --map-landuse-2:     #060B13;
  --map-park:          #0A1320;
  --map-water:         #000000;
  --map-road:          #243750;
  --map-road-2:        #294060;
  --map-road-3:        #314E72;
  --map-path:          #182636;
  --map-building:      #0A1622;
  --map-building-edge: #0F1E30;
  --map-cluster-fill:  #0D1B2B;
}

/* ─── Neutral-gray basemap (independent of accent theme) ─────
   Opt-in via data-basemap="gray" on [data-isg]. Overrides only the --map-*
   basemap tokens with a neutral charcoal palette, so the accent theme (zones,
   pins, boundaries, UI) still follows green/blue while the map reads gray.
   Placed AFTER the blue theme block so it wins the same-specificity tie when
   both attributes are present (e.g. blue accent + gray map). map-base.js reads
   these live, so styleBaseLayers()/recolor() pick them up on toggle. */
[data-isg][data-basemap="gray"] {
  --map-land:          #0A0A0B;
  --map-landuse:       #0E0E10;
  --map-landuse-2:     #0C0C0D;
  --map-park:          #111113;
  --map-water:         #000000;
  --map-road:          #313134;
  --map-road-2:        #3A3A3E;
  --map-road-3:        #444448;
  --map-path:          #232326;
  --map-building:      #141416;
  --map-building-edge: #1B1B1E;
  --map-cluster-fill:  #18181B;
}

/* ─── Base resets / element styles for cards ─── */
[data-isg] {
  font-family: var(--font-ui);
  color: var(--fg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[data-isg] h1 { font: var(--t-h1); margin: 0; letter-spacing: -0.01em; }
[data-isg] h2 { font: var(--t-h2); margin: 0; letter-spacing: -0.01em; }
[data-isg] h3 { font: var(--t-h3); margin: 0; letter-spacing: -0.005em; }
[data-isg] p  { font: var(--t-body); margin: 0; color: var(--fg-1); }
[data-isg] code, [data-isg] .mono { font: var(--t-mono); }

/* ─── Border-shimmer animation ─── */
@keyframes isg-shimmer {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  [data-isg] *,
  [data-isg] *::before,
  [data-isg] *::after { animation-duration: 0s !important; }
}