/* ═══════════════════════════════════════════════
   CYBERSPEED — Design System 
   Cyberpunk Dashboard Theme Tokens
   ═══════════════════════════════════════════════ */

:root {
    /* ── Primary Neon Colors ── */
    --neon-cyan: #00f0ff;
    --neon-cyan-rgb: 0, 240, 255;
    --neon-blue: #0080ff;
    --neon-blue-rgb: 0, 128, 255;
    --neon-magenta: #ff00c8;
    --neon-magenta-rgb: 255, 0, 200;
    --neon-pink: #ff3090;
    --neon-pink-rgb: 255, 48, 144;
    --neon-red: #ff1744;
    --neon-red-rgb: 255, 23, 68;
    --neon-orange: #ff6d00;
    --neon-orange-rgb: 255, 109, 0;
    --neon-yellow: #ffea00;
    --neon-yellow-rgb: 255, 234, 0;
    --neon-green: #00e676;
    --neon-green-rgb: 0, 230, 118;

    /* ── Background Colors ── */
    --bg-primary: #0a0a1a;
    --bg-secondary: #0d0d2b;
    --bg-tertiary: #111133;
    --bg-card: rgba(13, 13, 43, 0.85);
    --bg-card-hover: rgba(20, 20, 60, 0.9);
    --bg-glass: rgba(10, 10, 30, 0.6);
    --bg-glass-strong: rgba(10, 10, 30, 0.85);

    /* ── Surface / Border Colors ── */
    --border-subtle: rgba(0, 240, 255, 0.1);
    --border-medium: rgba(0, 240, 255, 0.2);
    --border-strong: rgba(0, 240, 255, 0.4);
    --border-active: var(--neon-cyan);

    /* ── Text Colors ── */
    --text-primary: #e0e8ff;
    --text-secondary: rgba(224, 232, 255, 0.65);
    --text-muted: rgba(224, 232, 255, 0.35);
    --text-accent: var(--neon-cyan);
    --text-danger: var(--neon-red);

    /* ── Typography ── */
    --font-display: 'Orbitron', monospace, sans-serif;
    --font-body: 'Rajdhani', 'Segoe UI', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;

    /* ── Font Sizes ── */
    --fs-xs: 0.65rem;
    --fs-sm: 0.78rem;
    --fs-md: 0.9rem;
    --fs-lg: 1.1rem;
    --fs-xl: 1.4rem;
    --fs-2xl: 2rem;
    --fs-3xl: 3rem;
    --fs-speed: clamp(3rem, 8vw, 6rem);
    --fs-speed-decimal: clamp(1.4rem, 3.5vw, 2.5rem);

    /* ── Spacing ── */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-2xl: 48px;

    /* ── Border Radius ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-neon-cyan: 0 0 10px rgba(var(--neon-cyan-rgb), 0.3), 0 0 30px rgba(var(--neon-cyan-rgb), 0.15);
    --shadow-neon-magenta: 0 0 10px rgba(var(--neon-magenta-rgb), 0.3), 0 0 30px rgba(var(--neon-magenta-rgb), 0.15);
    --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(var(--neon-cyan-rgb), 0.1);

    /* ── Transitions ── */
    --transition-fast: 150ms ease;
    --transition-medium: 300ms ease;
    --transition-slow: 500ms ease;

    /* ── Gauge ── */
    --gauge-size: min(55vw, 55vh, 480px);
    --gauge-start-angle: 135;
    --gauge-end-angle: 405;
    --gauge-arc-span: 270;
    --gauge-max-speed-car: 240;
    --gauge-max-speed-bike: 180;
}