/* SuperFlexMap design tokens — single source of truth for colour, type,
 * spacing, radius, shadow. Loaded once via <link> in each Jinja template
 * (index.html / admin.html / login.html) BEFORE that template's inline
 * <style> block, so later rules can still override when intentional.
 *
 * Background: before this file existed, the same palette was restated
 * across ~167 hex literals in index.html alone, plus 157 inline
 * style="..." attributes across templates. Future palette tweaks are
 * now one-line edits here; the rest of the templates reference
 * var(--sfm-…).
 *
 * Naming convention: --sfm-<role>[-<modifier>]. Roles are semantic
 * (bg-panel, accent, brand) rather than chromatic (navy, teal). When
 * adding a token, ask "what is its role" — never name it by colour.
 *
 * Out of scope here: deck.gl map-layer fill/stroke RGBA tuples and the
 * POI category palette in index.html JS (lines 829-830, 4421). Those
 * are Spec 01 / Spec 03 territory.
 */

:root {
    /* ─── Surfaces (the navy ladder this app already uses) ────────────── */
    --sfm-bg-page:        #1a1a2e;             /* outermost body bg          */
    --sfm-bg-panel:       #16213e;             /* sidebar / card / raised    */
    --sfm-bg-input:       #0f3460;             /* inputs / dropdown options  */
    --sfm-bg-input-hover: #1a3a6e;             /* hover state on dark bgs    */
    --sfm-line:           #1a3a6e;             /* dividers, input borders    */
    --sfm-line-soft:      #233a64;             /* lighter row separators     */

    /* ─── Light surfaces (popups + map InfoWindows render on white) ───── */
    --sfm-bg-on-light:        #fafafa;         /* filter chip stripe          */
    --sfm-line-on-light:      #dddddd;         /* popup chip border           */

    /* ─── Text ────────────────────────────────────────────────────────── */
    --sfm-text-1:              #eeeeee;        /* primary on dark             */
    --sfm-text-2:              #aaaaaa;        /* secondary, labels           */
    --sfm-text-3:              #888888;        /* tertiary, hint              */
    --sfm-text-on-light:       #333333;        /* primary on white            */
    --sfm-text-muted-on-light: #666666;        /* muted on white              */

    /* ─── Accent + brand ──────────────────────────────────────────────── */
    --sfm-accent:        #16c79a;              /* ~90% of interactive state   */
    --sfm-accent-dim:    #12a882;              /* hover/active darker accent  */
    --sfm-accent-soft:   rgba(22,199,154,0.12); /* tint behind active states  */
    --sfm-brand:         #e94560;              /* wordmark / selected SA / X  */
    --sfm-brand-dim:     #c73652;              /* darker brand for solid-btn  */
    --sfm-brand-hover:   #ff6b8a;              /* lighter brand for text/icon */
    --sfm-brand-soft:    rgba(233,69,96,0.12); /* tint for selected polygon   */

    /* ─── Error banner on dark (login form, etc.) ────────────────────── */
    --sfm-error-bg:      #3a1a1e;              /* dark-wine banner bg         */
    --sfm-error-text:    #ff8099;              /* lighter pink for contrast   */

    /* ─── Admin dashboard ─────────────────────────────────────────────── */
    --sfm-bg-topbar:     #0f1929;              /* admin topbar (darker panel) */
    --sfm-line-strong:   #555555;              /* stronger border / dim text  */
    /* Activity badges (web vs MCP attribution) */
    --sfm-badge-web-bg:    #1e3a5f;
    --sfm-badge-web-text:  #66c0ff;
    --sfm-badge-mcp-bg:    #3a1e5f;
    --sfm-badge-mcp-text:  #c066ff;
    /* Status pills (token / API-key state) */
    --sfm-status-active-bg:     #1a3a2a;       /* active = green-tinted dark  */
    --sfm-status-expired-bg:    #3a2e1a;       /* expired = amber-tinted dark */
    --sfm-status-expired-text:  #f0a500;       /* gold text                   */
    /* Secondary action accents (edit, toggle-disable, regen) */
    --sfm-action-info-hover:    #1a4a80;       /* edit button hover bg        */
    --sfm-action-warn-hover-bg: #2a2a10;       /* disable button hover bg     */
    --sfm-action-regen:         #4fc3f7;       /* regenerate API key button   */
    /* Soft variants */
    --sfm-bg-panel-soft:        rgba(22,33,62,0.27); /* hover stripe on table */

    /* ─── Status banners (popups / messages) ──────────────────────────── */
    --sfm-info-bg:      #e8f4fd;
    --sfm-info-text:    #084298;
    --sfm-success-bg:   #d4edda;
    --sfm-success-text: #155724;
    --sfm-warn-bg:      #fff3cd;
    --sfm-warn-text:    #856404;
    --sfm-danger-bg:    #f8d7da;
    --sfm-danger-text:  #721c24;

    /* ─── Overlays ────────────────────────────────────────────────────── */
    --sfm-overlay-bg:   rgba(0,0,0,0.35);       /* map-loader backdrop       */

    /* ─── Geometry ────────────────────────────────────────────────────── */
    --sfm-radius-sm: 4px;
    --sfm-radius:    8px;
    --sfm-radius-lg: 12px;

    /* ─── Spacing scale (multiples of 4) ──────────────────────────────── */
    --sfm-space-1:  4px;
    --sfm-space-2:  8px;
    --sfm-space-3: 12px;
    --sfm-space-4: 16px;
    --sfm-space-5: 20px;
    --sfm-space-6: 24px;

    /* ─── Type ────────────────────────────────────────────────────────── */
    --sfm-font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sfm-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --sfm-type-h1:    22px;
    --sfm-type-h2:    18px;
    --sfm-type-h3:    14px;
    --sfm-type-body:  13px;
    --sfm-type-label: 11px;
    --sfm-type-mono:  12px;

    /* ─── Shadows ─────────────────────────────────────────────────────── */
    --sfm-shadow-1: 0 2px 8px rgba(0,0,0,0.25);
    --sfm-shadow-2: 0 8px 24px rgba(0,0,0,0.4);

    /* ─── Map-layer swatches (Spec 02) ─────────────────────────────────
     * Used by sidebar .layer-toggle__swatch CSS AND read by JS at boot
     * (LAYER_COLOURS in index.html — Spec 01) so the sidebar swatch and
     * the deck.gl cluster bubble always render the same colour. Hex form
     * is what tokenRgb() in index.html parses. */
    --sfm-layer-cycle: #5bd4e5;    /* cyan        — cycleways */
    --sfm-layer-poi:   #c28bff;    /* lavender    — POIs */
    --sfm-layer-bus:   #ffb05b;    /* amber       — bus stops, bus depots */
    --sfm-layer-bike:  #6be5a8;    /* mint        — bike share, bike parking */
    --sfm-layer-rail:  #6a8bff;    /* periwinkle  — rail stations */
    --sfm-layer-luas:  #ff7baa;    /* rose        — Luas */
    --sfm-layer-metro: #f0d26b;    /* sand        — metro */
    --sfm-layer-tram:  #9ae36b;    /* olive       — tram */
    --sfm-layer-mm-parking: #ff3e9c; /* vivid magenta — micromobility parking candidates (off-green to stay visible against parks/vegetation) */

    /* ─── Breakpoints (Spec 05) ────────────────────────────────────
     * Mobile-first cutoff for the bottom-sheet layout. CSS media
     * queries can't `var()` directly — we use the literal `767.98px`
     * in queries; this token is the documentation anchor.
     * --sfm-topbar-height bumps to ~56px when Spec 06 lands. The
     * .mobile-chips bar at the top of the viewport reads this via
     * top: calc(12px + var(--sfm-topbar-height, 0px)). */
    --sfm-bp-mobile:      768px;
    --sfm-topbar-height:  56px;     /* Spec 06: bumped from 0px when topbar landed */
}