/* ── Editorial Map Style System — Design Tokens ──────────────────────────── *
 * coalescence-cradle / design-systems / maps / editorial / map-tokens.css   *
 *                                                                            *
 * All map visual values as CSS custom properties.                            *
 * Integrated with the existing data-theme="light" / data-theme="dark"       *
 * toggle pattern. Dark mode is separately designed, not an inversion.        *
 *                                                                            *
 * Prefix convention: --map-* (isolated from site-level --color-* tokens)    *
 * Naming: category-role[-variant]                                            *
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── LIGHT MODE (default) ────────────────────────────────────────────────── */
:root {

  /* ── Basemap surface ─────────────────────────────────────────────────── */
  /* These values are intended as MapLibre paint-property overrides applied  */
  /* to the OpenFreeMap Positron basemap via style.load.                     */
  --map-bg:             #f3f1ec;  /* Page/canvas background behind map         */
  --map-land:           #f6f4ef;  /* Land / fill-color for background-layer    */
  --map-water:          #ddd8d0;  /* Water bodies — rivers, lakes, ocean       */
  --map-park:           #e9ece4;  /* Parks, open space — very muted green cast */
  --map-road-minor:     #e3ded7;  /* Residential, service roads                */
  --map-road-major:     #d0cac2;  /* Primary, secondary, trunk roads           */
  --map-road-highway:   #c8c2ba;  /* Motorways — slightly darker, no color     */
  --map-boundary:       #ccc6be;  /* Administrative boundaries                 */
  --map-building:       #ece8e1;  /* Building footprints — very soft           */
  --map-label:          #7e7a72;  /* Primary map labels (city, town names)     */
  --map-label-soft:     #aaa49a;  /* Secondary labels (neighborhoods, etc.)    */
  --map-label-water:    #9e9890;  /* Water labels                              */

  /* ── Neutral ramp (data-free, structural) ───────────────────────────── */
  --map-neutral-0:      #f0eeeb;  /* Lightest — empty / no-data               */
  --map-neutral-1:      #d8d1c7;  /* Step 1                                    */
  --map-neutral-2:      #b7afa4;  /* Step 2                                    */
  --map-neutral-3:      #9b9189;  /* Step 3 — mid neutral                      */

  /* ── Sequential ramp — cartographic ochre-earth progression ────────── */
  /* Used for: scores, indices, intensity, risk. Not a rainbow.              */
  /* Low end is parchment; high end is deep burnt sienna.                    */
  --map-seq-1:          #f0eeeb;  /* Stop 1 — neutral parchment               */
  --map-seq-2:          #dccf9e;  /* Stop 2 — golden straw                    */
  --map-seq-3:          #c4924a;  /* Stop 3 — ochre amber                     */
  --map-seq-4:          #a85c28;  /* Stop 4 — warm sienna                     */
  --map-seq-5:          #6e3018;  /* Stop 5 — deep burnt umber                */

  /* ── Height Headroom ramp — saffron → Prussian blue ──────────────────── */
  /* Semantic intent: depth of latent spatial capacity, not risk/hazard.    */
  --map-headroom-1:     #E7C84F;  /* 10–25 ft — saffron gold                  */
  --map-headroom-2:     #B8B17A;  /* 25–50 ft — warm straw tan                */
  --map-headroom-3:     #789AA2;  /* 50–75 ft — steel blue-green              */
  --map-headroom-4:     #3F6F8E;  /* 75–100 ft — medium Prussian blue         */
  --map-headroom-5:     #0F344F;  /* 100+ ft — deep Prussian blue             */
  /* Legacy alias (kept for any external refs) */
  --map-hh-1:           #E7C84F;  /* alias → --map-headroom-1                 */

  /* ── Threshold / eligibility ramp ──────────────────────────────────── */
  /* Used for: policy eligibility, threshold compliance, tiered levels.      */
  /* Each level has a fill and a paired border for pattern legibility.        */
  --map-threshold-none:     #ededea;  /* None — neutral ground                 */
  --map-threshold-low:      #d4ccba;  /* Low — warm sand                       */
  --map-threshold-caution:  #c4924a;  /* Caution — ochre gold                  */
  --map-threshold-warning:  #a85c28;  /* Warning — warm sienna                 */
  --map-threshold-critical: #6e3018;  /* Critical / eligible — deep burnt      */

  --map-threshold-none-border:      #d8d5cf;
  --map-threshold-low-border:       #bbb5a3;
  --map-threshold-caution-border:   #9a7630;
  --map-threshold-warning-border:   #884018;
  --map-threshold-critical-border:  #56200e;

  /* ── Vulnerability / compound burden ramp ────────────────────────────── */
  /* Distinct from the simple risk ramp — uses a blue-violet cast to         */
  /* communicate compound exposure, not just a single variable.              */
  --map-vuln-1:          #edeef2;  /* Very low burden                          */
  --map-vuln-2:          #c8cedd;  /* Low                                      */
  --map-vuln-3:          #8f9ab8;  /* Moderate                                 */
  --map-vuln-4:          #5a6a94;  /* High                                     */
  --map-vuln-5:          #2c3a60;  /* Very high burden                         */

  /* ── Categorical palette — 6 muted classes ──────────────────────────── */
  /* Derived from ink/gilt/mineral/frost/bloom base palettes.                */
  /* Muted but distinguishable. Accessible at sufficient polygon size.        */
  --map-cat-a:           #8a9a72;  /* Warm sage green (muted organic)          */
  --map-cat-b:           #6f91a6;  /* Mineral steel-blue                       */
  --map-cat-c:           #c3a24d;  /* Gilt amber (muted gold)                  */
  --map-cat-d:           #7f748e;  /* Mineral violet                           */
  --map-cat-e:           #b08878;  /* Bloom-rose muted                         */
  --map-cat-f:           #8c8c78;  /* Warm neutral olive                       */

  /* ── Case-study highlight / focus map ───────────────────────────────── */
  /* Used when one area is the editorial subject; all others are context.    */
  --map-highlight:          #a85c28;  /* The focus geography — warm sienna     */
  --map-highlight-border:   #6e3018;  /* Highlight border — deep umber         */
  --map-mute-fill:          #e8e4dc;  /* All context polygons — very low       */
  --map-mute-border:        #cdc8be;  /* Context polygon border                */
  --map-mute-opacity:       0.45;     /* Opacity applied to context fills      */

  /* ── Alert and emphasis ─────────────────────────────────────────────── */
  --map-alert:           #6e3018;  /* High-severity emphasis (data-driven)     */
  --map-caution:         #a85c28;  /* Mid-severity / attention                 */
  --map-positive:        #4a7858;  /* Positive / good outcome (muted green)    */

  /* ── Point markers ──────────────────────────────────────────────────── */
  --map-marker-primary:  #a85c28;  /* Default point — warm sienna              */
  --map-marker-dim:      #9b9189;  /* Deemphasized / inactive point            */
  --map-marker-selected: #6e3018;  /* Selected / active point                  */
  --map-marker-size:     8px;
  --map-marker-size-hover: 11px;

  /* ── UI chrome ───────────────────────────────────────────────────────── */
  /* Map container, controls, attribution — all use minimal editorial style. */
  --map-container-bg:    #f3f1ec;  /* Map wrapper background                   */
  --map-container-border: 1px solid #e0dbd3;  /* Outer frame                   */
  --map-control-bg:      rgba(246, 244, 239, 0.94);  /* Zoom / layer controls  */
  --map-control-border:  #d4cec6;
  --map-control-text:    #5c5049;
  --map-control-text-hover: #261e1a;
  --map-attribution-bg:  rgba(243, 241, 236, 0.80);
  --map-attribution-text: #9b9189;
  --map-attribution-size: 10px;
  --map-tooltip-bg:      rgba(246, 244, 239, 0.97);
  --map-tooltip-border:  #d4cec6;
  --map-tooltip-shadow:  0 1px 4px rgba(20, 16, 9, 0.06);
  --map-popup-bg:        #f6f4ef;
  --map-popup-border:    #d8d1c7;
  --map-popup-shadow:    0 1px 6px rgba(20, 16, 9, 0.07);
  --map-popup-name-color: #261e1a;
  --map-popup-label-color: #7a6e65;
  --map-popup-value-color: #3a3028;

  /* ── Hover and selected states ───────────────────────────────────────── */
  --map-hover-border-width: 2px;
  --map-hover-border-color: #bcb5ac;  /* Subtle — slightly stronger outline   */
  --map-hover-fill-opacity-delta: 0.12;  /* Increase fill opacity slightly    */
  --map-selected-border-width: 2.5px;
  --map-selected-border-color: #7a6e65;
  --map-selected-fill-opacity-delta: 0.18;

  /* ── Typography ───────────────────────────────────────────────────────── */
  /* Font family variables only — no embedded or proprietary fonts.          */
  /* Override these with whatever sans stack the host site uses.              */
  --map-font-display:    "Barlow Condensed", "Inter", system-ui, sans-serif;
  --map-font-body:       "Inter", system-ui, -apple-system, sans-serif;
  /* Documentation/code samples only. Do not use in public map UI,
     legends, popups, tabs, captions, or source notes. */
  --map-docs-code-font:  "DM Mono", ui-monospace, monospace;

  /* Map UI type scale */
  --map-text-xs:         0.67rem;   /* Attribution, source notes              */
  --map-text-sm:         0.73rem;   /* Legend labels, popup values            */
  --map-text-base:       0.82rem;   /* Popup body, legend descriptions        */
  --map-text-label:      0.70rem;   /* Legend swatch labels, tab labels       */
  --map-text-title:      0.84rem;   /* Legend title, popup name               */
  --map-text-map-title:  0.92rem;   /* Inline map figure title                */

  /* Letter-spacing for condensed display labels */
  --map-tracking-wide:   0.05em;
  --map-tracking-caps:   0.09em;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --map-gap-xs:    4px;
  --map-gap-sm:    8px;
  --map-gap-md:    14px;
  --map-gap-lg:    22px;
  --map-gap-xl:    34px;

  /* ── Border / rule treatment ─────────────────────────────────────────── */
  --map-radius-sm:  2px;
  --map-radius-md:  3px;
  --map-radius-lg:  6px;
  --map-rule:       1px solid #e0dbd3;
  --map-rule-strong: 1px solid #bcb5ac;

  /* ── Legend chrome ───────────────────────────────────────────────────── */
  --map-legend-bg:        rgba(246, 244, 239, 0.94);
  --map-legend-border:    #e4dfd8;
  --map-legend-shadow:    none;
  --map-legend-title-color:   #261e1a;
  --map-legend-label-color:   #5c5049;
  --map-legend-note-color:    #9b9189;
  --map-legend-source-color:  #9b9189;
  --map-swatch-size:      12px;
  --map-swatch-radius:    2px;

  /* ── Figure / static map ─────────────────────────────────────────────── */
  --map-figure-bg:        #f6f4ef;
  --map-figure-border:    #e0dbd3;
  --map-figure-label-color:  #7a6e65;
  --map-figure-title-color:  #0a0705;
  --map-figure-caption-color: #5c5049;
  --map-figure-source-color:  #9b9189;
  --map-annotation-color:    #a85c28;
  --map-annotation-line:     #a85c28;
}

/* ── DARK MODE ───────────────────────────────────────────────────────────── */
/* Separately designed palette. Not an inversion of light mode.              */
/* Uses calmer near-black with reduced-brightness accents.                   */
:root[data-theme="dark"] {

  /* ── Basemap surface ─────────────────────────────────────────────────── */
  --map-bg:             #111110;
  --map-land:           #161514;
  --map-water:          #1f1d1c;
  --map-park:           #1a1d17;
  --map-road-minor:     #201f1e;
  --map-road-major:     #2a2826;
  --map-road-highway:   #333028;
  --map-boundary:       #2e2b28;
  --map-building:       #1d1c1a;
  --map-label:          #8a8278;
  --map-label-soft:     #5c5850;
  --map-label-water:    #4a4844;

  /* ── Neutral ramp ────────────────────────────────────────────────────── */
  --map-neutral-0:      #252320;
  --map-neutral-1:      #38352f;
  --map-neutral-2:      #504c44;
  --map-neutral-3:      #68635a;

  /* ── Sequential ramp — dark ochre-earth ──────────────────────────── */
  --map-seq-1:          #252320;  /* Neutral base                             */
  --map-seq-2:          #3d3320;  /* Dark warm straw                          */
  --map-seq-3:          #7a5820;  /* Dark ochre                               */
  --map-seq-4:          #904e28;  /* Dark sienna                              */
  --map-seq-5:          #b05030;  /* Warm brick (not hot pink)                */
  --map-headroom-1:     #D6B94A;  /* 10–25 ft — dark saffron                  */
  --map-headroom-2:     #AAA26B;  /* 25–50 ft — muted tan                     */
  --map-headroom-3:     #668B96;  /* 50–75 ft — dark steel blue-green         */
  --map-headroom-4:     #356987;  /* 75–100 ft — dark Prussian                */
  --map-headroom-5:     #123A58;  /* 100+ ft — deep dark Prussian             */
  --map-hh-1:           #D6B94A;  /* alias → --map-headroom-1                 */

  /* ── Threshold ramp ─────────────────────────────────────────────────── */
  --map-threshold-none:     #252320;
  --map-threshold-low:      #3a362c;
  --map-threshold-caution:  #7a5820;
  --map-threshold-warning:  #904e28;
  --map-threshold-critical: #b05030;

  --map-threshold-none-border:      #302e2a;
  --map-threshold-low-border:       #504840;
  --map-threshold-caution-border:   #9a7a30;
  --map-threshold-warning-border:   #b06840;
  --map-threshold-critical-border:  #c87050;

  /* ── Vulnerability ramp ─────────────────────────────────────────────── */
  --map-vuln-1:          #1e2028;
  --map-vuln-2:          #2c3048;
  --map-vuln-3:          #404870;
  --map-vuln-4:          #5868a0;
  --map-vuln-5:          #7888c8;

  /* ── Categorical palette ─────────────────────────────────────────────── */
  --map-cat-a:           #6a8058;  /* Muted sage                              */
  --map-cat-b:           #5880a0;  /* Steel blue                              */
  --map-cat-c:           #a08838;  /* Gilt amber                              */
  --map-cat-d:           #706880;  /* Mineral violet                          */
  --map-cat-e:           #906870;  /* Bloom-rose                              */
  --map-cat-f:           #707060;  /* Olive warm neutral                      */

  /* ── Case-study highlight ────────────────────────────────────────────── */
  --map-highlight:          #b05030;
  --map-highlight-border:   #c87050;
  --map-mute-fill:          #201f1d;
  --map-mute-border:        #302e2a;
  --map-mute-opacity:       0.50;

  /* ── Alert and emphasis ─────────────────────────────────────────────── */
  --map-alert:           #b05030;
  --map-caution:         #a07030;
  --map-positive:        #4a8060;

  /* ── Point markers ──────────────────────────────────────────────── */
  --map-marker-primary:  #b05030;
  --map-marker-dim:      #504c44;
  --map-marker-selected: #c87050;
  --map-marker-size:     8px;
  --map-marker-size-hover: 11px;

  /* ── UI chrome ───────────────────────────────────────────────────────── */
  --map-container-bg:    #111110;
  --map-container-border: 1px solid #282624;
  --map-control-bg:      rgba(24, 23, 21, 0.92);
  --map-control-border:  #302e2a;
  --map-control-text:    #8a8278;
  --map-control-text-hover: #d4cec6;
  --map-attribution-bg:  rgba(17, 17, 16, 0.75);
  --map-attribution-text: #504c44;
  --map-attribution-size: 10px;
  --map-tooltip-bg:      rgba(24, 23, 21, 0.96);
  --map-tooltip-border:  #302e2a;
  --map-tooltip-shadow:  0 1px 4px rgba(0, 0, 0, 0.24);
  --map-popup-bg:        #1e1d1b;
  --map-popup-border:    #2e2c28;
  --map-popup-shadow:    0 1px 6px rgba(0, 0, 0, 0.28);
  --map-popup-name-color:  #e0dbd3;
  --map-popup-label-color: #68635a;
  --map-popup-value-color: #c8c2ba;

  /* ── Hover and selected states ───────────────────────────────────────── */
  --map-hover-border-width: 2px;
  --map-hover-border-color: #504c44;
  --map-hover-fill-opacity-delta: 0.15;
  --map-selected-border-width: 2.5px;
  --map-selected-border-color: #8a8278;
  --map-selected-fill-opacity-delta: 0.20;

  /* Typography — same variables, values unchanged */
  --map-font-display:    "Barlow Condensed", "Inter", system-ui, sans-serif;
  --map-font-body:       "Inter", system-ui, -apple-system, sans-serif;
  --map-docs-code-font:  "DM Mono", ui-monospace, monospace;

  /* ── Spacing and border — unchanged between modes ───────────────────── */
  --map-gap-xs:    4px;
  --map-gap-sm:    8px;
  --map-gap-md:    14px;
  --map-gap-lg:    22px;
  --map-gap-xl:    34px;
  --map-radius-sm:  2px;
  --map-radius-md:  3px;
  --map-radius-lg:  6px;
  --map-rule:       1px solid #282624;
  --map-rule-strong: 1px solid #404040;

  /* ── Legend chrome ───────────────────────────────────────────────────── */
  --map-legend-bg:        rgba(22, 21, 20, 0.94);
  --map-legend-border:    #2a2826;
  --map-legend-shadow:    none;
  --map-legend-title-color:   #d4cec6;
  --map-legend-label-color:   #8a8278;
  --map-legend-note-color:    #504c44;
  --map-legend-source-color:  #504c44;
  --map-swatch-size:      12px;
  --map-swatch-radius:    2px;

  /* ── Figure / static map ─────────────────────────────────────────────── */
  --map-figure-bg:        #161514;
  --map-figure-border:    #282624;
  --map-figure-label-color:  #68635a;
  --map-figure-title-color:  #e0dbd3;
  --map-figure-caption-color: #8a8278;
  --map-figure-source-color:  #504c44;
  --map-annotation-color:    #b05030;
  --map-annotation-line:     #b05030;
}

/* ── System preference fallback ──────────────────────────────────────────── */
/* Applied when no data-theme attribute is set on <html>.                    */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --map-bg:             #111110;
    --map-land:           #161514;
    --map-water:          #1f1d1c;
    --map-park:           #1a1d17;
    --map-road-minor:     #201f1e;
    --map-road-major:     #2a2826;
    --map-road-highway:   #333028;
    --map-boundary:       #2e2b28;
    --map-building:       #1d1c1a;
    --map-label:          #8a8278;
    --map-label-soft:     #5c5850;
    --map-label-water:    #4a4844;
    --map-neutral-0:      #252320;
    --map-neutral-1:      #38352f;
    --map-neutral-2:      #504c44;
    --map-neutral-3:      #68635a;
    --map-seq-1:          #252320;
    --map-seq-2:          #3d3320;
    --map-seq-3:          #7a5820;
    --map-seq-4:          #904e28;
    --map-seq-5:          #b05030;
    --map-headroom-1:     #D6B94A;
    --map-headroom-2:     #AAA26B;
    --map-headroom-3:     #668B96;
    --map-headroom-4:     #356987;
    --map-headroom-5:     #123A58;
    --map-hh-1:           #D6B94A;
    --map-threshold-none:     #252320;
    --map-threshold-low:      #3a362c;
    --map-threshold-caution:  #7a5820;
    --map-threshold-warning:  #904e28;
    --map-threshold-critical: #b05030;
    --map-threshold-none-border:      #302e2a;
    --map-threshold-low-border:       #504840;
    --map-threshold-caution-border:   #9a7a30;
    --map-threshold-warning-border:   #b06840;
    --map-threshold-critical-border:  #c87050;
    --map-vuln-1:          #1e2028;
    --map-vuln-2:          #2c3048;
    --map-vuln-3:          #404870;
    --map-vuln-4:          #5868a0;
    --map-vuln-5:          #7888c8;
    --map-cat-a:           #6a8058;
    --map-cat-b:           #5880a0;
    --map-cat-c:           #a08838;
    --map-cat-d:           #706880;
    --map-cat-e:           #906870;
    --map-cat-f:           #707060;
    --map-highlight:          #b05030;
    --map-highlight-border:   #c87050;
    --map-mute-fill:          #201f1d;
    --map-mute-border:        #302e2a;
    --map-mute-opacity:       0.50;
    --map-alert:           #b05030;
    --map-caution:         #a07030;
    --map-positive:        #4a8060;
    --map-marker-primary:  #b05030;
    --map-marker-dim:      #504c44;
    --map-marker-selected: #c87050;
    --map-container-bg:    #111110;
    --map-container-border: 1px solid #282624;
    --map-control-bg:      rgba(24, 23, 21, 0.92);
    --map-control-border:  #302e2a;
    --map-control-text:    #8a8278;
    --map-control-text-hover: #d4cec6;
    --map-attribution-bg:  rgba(17, 17, 16, 0.75);
    --map-attribution-text: #504c44;
    --map-tooltip-bg:      rgba(24, 23, 21, 0.96);
    --map-tooltip-border:  #302e2a;
    --map-tooltip-shadow:  0 1px 4px rgba(0, 0, 0, 0.24);
    --map-popup-bg:        #1e1d1b;
    --map-popup-border:    #2e2c28;
    --map-popup-shadow:    0 1px 6px rgba(0, 0, 0, 0.28);
    --map-popup-name-color:  #e0dbd3;
    --map-popup-label-color: #68635a;
    --map-popup-value-color: #c8c2ba;
    --map-hover-border-color: #504c44;
    --map-selected-border-color: #8a8278;
    --map-rule:       1px solid #282624;
    --map-rule-strong: 1px solid #38352f;
    --map-legend-bg:        rgba(22, 21, 20, 0.94);
    --map-legend-border:    #2a2826;
    --map-legend-shadow:    none;
    --map-legend-title-color:   #d4cec6;
    --map-legend-label-color:   #8a8278;
    --map-legend-note-color:    #504c44;
    --map-legend-source-color:  #504c44;
    --map-figure-bg:        #161514;
    --map-figure-border:    #282624;
    --map-figure-label-color:  #68635a;
    --map-figure-title-color:  #e0dbd3;
    --map-figure-caption-color: #8a8278;
    --map-figure-source-color:  #504c44;
    --map-annotation-color:    #b05030;
    --map-annotation-line:     #b05030;
  }
}

/* ── Fallback state — no token ────────────────────────────────────────────── */
/* Applied by maps.js when MAPBOX_ACCESS_TOKEN is not set.                   */
.map-fallback--static {
  font-style: italic;
}