/* BuffMap shared design tokens — linked by index.html, one-pager.html, and
   dashboard.html so all three pages draw from one palette/card treatment
   instead of three independently hand-rolled dark themes. Page-specific
   layout (grids, component classes like .block/.insight-card) stays local
   to each file; only the tokens and the glass card treatment live here. */

:root {
    --bg-main: #07090e;
    --bg-panel: rgba(13, 18, 30, 0.5);
    --bg-card: rgba(18, 25, 41, 0.6);
    --bg-card-hover: rgba(26, 36, 59, 0.8);
    --border-color: rgba(255, 255, 255, 0.07);
    --border-hover: rgba(255, 255, 255, 0.15);
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;

    --color-emerald: #10b981;
    --color-emerald-glow: rgba(16, 185, 129, 0.15);
    --color-amber: #f59e0b;
    --color-amber-glow: rgba(245, 158, 11, 0.15);
    --color-rose: #ef4444;
    --color-rose-glow: rgba(239, 68, 68, 0.15);
    --color-blue: #3b82f6;
    --color-blue-glow: rgba(59, 130, 246, 0.15);
    --color-pink: #ec4899;
    --color-pink-glow: rgba(236, 72, 153, 0.15);
    --color-teal: #0d9488;
    --color-teal-glow: rgba(13, 148, 136, 0.15);
    --color-indigo: #6366f1;
    --color-indigo-glow: rgba(99, 102, 241, 0.15);
    --color-slate: #64748b;
    --color-slate-glow: rgba(100, 116, 139, 0.15);
    --color-lime: #84cc16;
    --color-lime-glow: rgba(132, 204, 22, 0.15);
    --color-cyan: #06b6d4;
    --color-cyan-glow: rgba(6, 182, 212, 0.15);
    --color-gold: #eab308;
    --color-gold-glow: rgba(234, 179, 8, 0.15);

    /* -------------------------------------------------------------------
       Categorical data-domain tokens. Every surface that names one of these
       domains (map pin, toggle switch, stat value, chart series, badge)
       draws from this map, so a color always means the same thing:

         Violent Crime ......... rose      Property Crime ........ amber
         Assessments & Values .. emerald   Code Violations ....... indigo
         Permits ............... blue      Mixed/total crime ..... pink
         311 / civic requests .. teal

       Status colors (trend-good/amber/bad) intentionally reuse emerald/
       amber/rose but only ever appear on small trend badges, never as a
       metric's identity color. */
    --cat-crime-violent: var(--color-rose);
    --cat-crime-property: var(--color-amber);
    --cat-crime-mixed: var(--color-pink);
    --cat-value: var(--color-emerald);
    --cat-code-violation: var(--color-indigo);
    --cat-permit: var(--color-blue);
    --cat-civic: var(--color-teal);

    /* Spatial scale — strict 8px grid with a 4px half-step for icon/chip
       micro-spacing. Structural paddings/margins/gaps use these only. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Motion — micro-interactions live in the 150–250ms band. */
    --dur-fast: 150ms;
    --dur-base: 200ms;
    --dur-slow: 250ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
    /* One shared shorthand for hover/focus/active feedback on interactive
       elements: only the properties that actually change, each in the fast
       band, rather than a blanket `all`. */
    --transition-interactive: color var(--dur-fast) var(--ease-standard),
        background-color var(--dur-fast) var(--ease-standard),
        border-color var(--dur-fast) var(--ease-standard),
        box-shadow var(--dur-base) var(--ease-standard),
        transform var(--dur-base) var(--ease-standard),
        opacity var(--dur-fast) var(--ease-standard);

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    /* Legacy blanket transition — still referenced by dashboard.html and
       one-pager.html; index.css uses --transition-interactive instead. */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --border-radius: 12px;
}

/* Respect OS-level motion preferences everywhere. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Canonical "elevated surface" card: frosted glass, not flat/opaque.
   Apply alongside layout classes, e.g. class="insight-card glass". */
.glass {
    background-color: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition-smooth);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}