/*
 * Design tokens: the only file that defines colours, type, spacing, radii, shadows,
 * motion and layers. Every other stylesheet uses var(--…).
 * Raw colours elsewhere are allowed only for data encodings (map categories, heat scales).
 */
:root {
    /* Brand */
    --primary: #5262e8;   /* brand; 4.9:1 under white text (WCAG AA). Was #6172f1 (4.0:1) */
    --primary-strong: #4554e5;
    --primary-soft: #eef0fe;
    --primary-line: #dfe3fd;
    --accent: #18b8ac;
    --accent-strong: #0f766e;   /* text on --accent-soft: AA */
    --accent-soft: #edfcfa;
    --brand-gradient: linear-gradient(135deg, #5262e8 0%, #4f8af7 52%, #18b8ac 100%);

    /* Text */
    --text: #1b2130;
    --text-2: #3f4756;
    --muted: #5b6270;   /* secondary text: AA on every surface, incl. --primary-soft */
    --faint: #9aa1ad;

    /* Surfaces and lines */
    --bg: #f5f6fa;
    --surface: #ffffff;
    --on-color: #ffffff; /* text, icons and outlines on coloured fills */
    /* Busyness scale, quiet -> busy (a data encoding; agent/map.js HEAT_STOPS must match) */
    --heat-1: #fde68a; --heat-2: #fbbf24; --heat-3: #f97316; --heat-4: #dc2626; --heat-5: #7f1d1d;
    --surface-2: #f8f9fc;
    --surface-3: #f3f4f8;
    --border: #e6e8ef;
    --border-strong: #d7dae3;
    --border-hover: #c4c9d6;

    /* Dark surfaces (footer, call-to-action bands, toasts) */
    --ink: #0f172a;
    --ink-2: #1e293b;
    --on-ink: #e2e8f0;
    --on-ink-muted: #94a3b8;

    /* Night surfaces: the landing page's map hero and its dark bands */
    --night: #05070f;
    --night-2: #0a0e1c;
    --night-3: #121831;
    --on-night: #f5f7ff;
    --on-night-2: #aab3cc;   /* secondary text on --night: 9:1 */
    --on-night-3: #7d87a3;   /* captions on --night: 5.4:1 */
    --night-line: rgba(255, 255, 255, .09);
    --canvas: #f5f5f7;       /* the light grey band between white sections */
    --primary-glow: #8b97ff; /* the brand colour lit on --night (8:1) */
    --accent-glow: #4fe0d2;

    /* Status */
    --success: #047857;   /* text on --success-soft: AA */
    --success-soft: #ecfdf5;
    --success-line: #a7f3d0;
    --warning: #b45309;
    --warning-soft: #fffbeb;
    --warning-line: #fde68a;
    --danger: #dc2626;
    --danger-strong: #b91c1c;
    --danger-soft: #fef2f2;
    --danger-line: #fecaca;
    --success-bright: #10b981; /* fills: meters, dots, chart marks */
    --warning-bright: #f59e0b;
    --danger-bright: #ef4444;

    /* Type */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Manrope', var(--font-sans);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 14px;
    --fs-base: 15px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-2xl: 26px;
    --fs-3xl: 34px;
    --fs-4xl: 46px;
    --fs-5xl: 58px;
    --lh-tight: 1.12;
    --lh-snug: 1.35;
    --lh: 1.6;

    /* Space: a 4px grid */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;

    /* Radius */
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 11px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-full: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-md: 0 6px 24px rgba(16, 24, 40, .08);
    --shadow-lg: 0 18px 40px rgba(15, 23, 42, .08);
    --shadow-xl: 0 28px 60px rgba(15, 23, 42, .12);
    --shadow-primary: 0 6px 16px rgba(82, 98, 232, .25);
    --ring: 0 0 0 3px rgba(82, 98, 232, .16);
    --ring-danger: 0 0 0 3px rgba(239, 68, 68, .12);

    /* Motion */
    --ease: cubic-bezier(.2, .8, .2, 1);
    --dur-fast: .12s;
    --dur: .2s;
    --dur-slow: .32s;

    /* Layers */
    --z-nav: 50;
    --z-menu: 60;
    --z-overlay: 80;
    --z-dialog: 1000;
    --z-toast: 1100;

    /* Layout */
    --container: 1180px;
    --gutter: 24px;
}

@media (max-width: 640px) {
    :root {
        --gutter: 16px;
    }
}