/* ═══════════════════════════════════════════════════════════════
           THEME — UI CHROME (single source for sidebar / popups / legend
           / font). Map *data-layer* colors live in the JS THEME object in
           the script below; on load they are mirrored into the --lyr-*
           variables here so the legend swatches stay in sync automatically.
           Edit colors in ONE place:
             · UI chrome + font   → this :root block
             · map data layers    → the JS THEME object (search "const THEME")
        ═══════════════════════════════════════════════════════════════ */
        :root {
            /* Font — Arial everywhere */
            --font: Arial, Helvetica, sans-serif;

            /* Map background = open water */
            --map-water: #cfe8f5;

            /* Panel / chrome */
            --panel-bg:          #ffffff;
            --panel-bg-alt:      #eef3f1;
            --panel-border:      rgba(20, 50, 38, 0.13);
            --panel-border-soft: rgba(20, 50, 38, 0.07);
            --cb-border:         #b7c4bd;

            /* Text */
            --text-strong: #16271f;
            --text:        #3a4a44;
            --text-muted:  #6f817a;
            --text-faint:  #9aa8a1;

            /* Accent (UI highlights) */
            --accent:      #128a5e;
            --accent-soft: rgba(18, 138, 94, 0.13);
            --shadow:      0 4px 18px rgba(20, 50, 38, 0.18);

            /* Popups */
            --popup-bg:     #ffffff;
            --popup-text:   #3a4a44;
            --popup-strong: #16271f;

            /* Group accent colors (legend titles + sidebar headers) */
            --grp-base:      #128a5e;
            --grp-exclusion: #d6453f;
            --grp-condition: #c07a10;
            --grp-ownership: #c2570c;
            --grp-equity:    #7b3fb0;

            /* --lyr-* are injected by applyTheme() from the JS THEME object */
        }