/* ROXDelta — Design System: Athletic Timing */
/* Fonts: Barlow Condensed (display) · DM Sans (UI) · DM Mono (times) */

:root {
    /* ── Palette (OKLCH) ─────────────────────────────────── */
    --bg:            oklch(98%   0.005  50);   /* warm cream — sits in the orange family, not olive */
    --bg-subtle:     oklch(94%   0.007  50);   /* inset surfaces, table bg */
    --bg-inset:      oklch(90%   0.009  50);   /* deeper inset */

    --ink:           oklch(13%   0.007  50);   /* near-black, warm-tinted */
    --ink-2:         oklch(42%   0.005  50);   /* secondary text */
    --ink-3:         oklch(64%   0.003  50);   /* placeholder, muted */

    --accent:        oklch(62%   0.220  28);   /* race orange — hue 28 stays orange at any lightness */
    --accent-dk:     oklch(52%   0.200  28);   /* darker orange: still orange, never brown */
    --accent-bg:     oklch(95%   0.022  32);   /* tinted bg for accent context */

    --faster:        oklch(40%   0.155 148);   /* racing green */
    --faster-bg:     oklch(93%   0.035 148);   /* green tinted bg */

    --slower:        oklch(46%   0.190  10);   /* crimson — hue 10° is pure red, 0° from orange */
    --slower-bg:     oklch(95%   0.025  10);   /* crimson tinted bg */

    --race-a:        oklch(47%   0.120 210);   /* slate-teal — clear blue, no overlap with orange/red */
    --race-b:        oklch(50%   0.190 305);   /* warm violet */

    --border:        oklch(88%   0.007  50);   /* hairline */
    --border-str:    oklch(76%   0.009  50);   /* rule lines */

    /* ── Typography ──────────────────────────────────────── */
    --f-display: 'Barlow Condensed', sans-serif;
    --f-body:    'DM Sans', sans-serif;
    --f-mono:    'DM Mono', monospace;

    /* ── Spacing (8-point 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;

    /* ── Radii ───────────────────────────────────────────── */
    --r-sm: 2px;
    --r-md: 4px;

    /* ── Transitions ─────────────────────────────────────── */
    --ease:   cubic-bezier(0.16, 1, 0.3, 1);
    --t:      0.22s;
    --t-slow: 0.35s;

    /* ── Noise texture (lightweight CSS noise, no SVG filter) ─ */
    --noise-opacity: 0.035;
}

/* ── Noise overlay on body ────────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        repeating-conic-gradient(
            oklch(50% 0 0 / var(--noise-opacity)) 0% 25%,
            transparent 0% 50%
        );
    background-size: 4px 4px;
    pointer-events: none;
    z-index: -1;
}