/* ==========================================================================
   oSplit design tokens — Wayfinder (docs/design/UX-SPEC.md §9)
   The ONLY file allowed to contain raw colour values.
   ========================================================================== */
:root {
    color-scheme: dark;

    /* ── Surfaces ── */
    --bg: #080b10;                           /* page / behind the map */
    --map-bg: #0d1117;                       /* map container before tiles load */
    --glass: rgba(15, 19, 26, 0.82);         /* floating chrome */
    --glass-2: rgba(24, 30, 40, 0.92);       /* dialogs, palette, hovered chrome */
    --glass-hi: rgba(255, 255, 255, 0.06);   /* hover fill */
    --glass-press: rgba(255, 255, 255, 0.10);
    --well: rgba(0, 0, 0, 0.35);             /* inputs, insets */
    --scrim: rgba(0, 0, 0, 0.55);            /* behind dialogs */
    --scrim-light: rgba(0, 0, 0, 0.45);      /* behind the command palette */
    --blur: saturate(160%) blur(18px);

    /* ── Borders ── */
    --stroke: rgba(255, 255, 255, 0.09);
    --stroke-2: rgba(255, 255, 255, 0.16);

    /* ── Text ── */
    --text: #eef2f6;
    --muted: #93a0b0;
    --dim: #5f6b7a;
    --on-accent: #03271a;                    /* text on volt fills */
    --on-light: #0b0f14;                     /* text on white/light fills */
    --white: #ffffff;

    /* ── Accent & status ── */
    --volt: #10b981;
    --volt-2: #34d399;
    --volt-soft: rgba(16, 185, 129, 0.14);
    --volt-glow: rgba(16, 185, 129, 0.35);
    --amber: #f59e0b;
    --amber-2: #fcd34d;
    --amber-soft: rgba(245, 158, 11, 0.14);
    --rose: #f43f5e;
    --rose-2: #fda4af;
    --rose-soft: rgba(244, 63, 94, 0.16);
    --rose-glow: rgba(244, 63, 94, 0.45);

    /* ── Orienteering ── */
    --course: #e879f9;                       /* overprint on dark UI */
    --course-print: #b52fd6;                 /* overprint for print / light */
    --course-soft: rgba(232, 121, 249, 0.14);

    /* ── Course type tags (not for runners) ── */
    --type-long: #10b981;
    --type-middle: #06b6d4;
    --type-sprint: #f59e0b;
    --type-night: #a78bfa;

    /* ── Runner palette: validated order, never cycled (UX-SPEC §9.2) ── */
    --runner-1: #059669;
    --runner-2: #2563eb;
    --runner-3: #d97706;
    --runner-4: #e11d48;
    --runner-muted: #8a94a3;                 /* > 8 runners: non-selected */

    /* ── Leg rank (timeline lanes) ── */
    --rank-1: #15803d;
    --rank-2: #4d7c0f;
    --rank-3: #a16207;
    --rank-4: #b91c1c;

    /* ── Typography ── */
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
    --fs-xs: 11px;
    --fs-sm: 12.5px;
    --fs-md: 13.5px;
    --fs-lg: 15px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-hero: 26px;

    /* ── Shape ── */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-2xl: 22px;
    --r-pill: 999px;
    --inset: 16px;                           /* distance of floating chrome from viewport edges */
    --gap: 10px;
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--volt);

    /* ── Motion ── */
    --t-fast: 150ms;
    --t-med: 200ms;
    --t-sheet: 300ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* ── Z-order (UX-SPEC §4.2) ── */
    --z-map: 0;
    --z-overlay: 400;
    --z-chrome: 900;
    --z-chrome-hi: 960;
    --z-popover: 1200;
    --z-sheet: 1300;
    --z-dialog: 2000;
    --z-recording: 2500;
    --z-palette: 3000;
    --z-toast: 6000;
}

@media (prefers-contrast: more) {
    :root {
        --glass: rgba(15, 19, 26, 0.97);
        --glass-2: rgba(24, 30, 40, 0.99);
        --stroke: rgba(255, 255, 255, 0.28);
        --stroke-2: rgba(255, 255, 255, 0.4);
        --muted: #c3ccd6;
        --dim: #9aa6b4;
    }
}