/* ─── DESIGN TOKENS — Extracted from AirPlay Studio product CSS ─── */
:root {
    /* Backgrounds */
    --bg-primary: #0a0a0f;
    --bg-secondary: #0b0f1a;
    --bg-tertiary: #12121a;
    --bg-elevated: #1a1a2e;

    /* Product-matched surfaces */
    --panel-bg: rgba(255, 255, 255, 0.03);
    --card-bg: rgba(30, 41, 59, 0.5);
    --glass-bg: rgba(15, 23, 42, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-accent: rgba(255, 255, 255, 0.05);
    --blur: blur(20px);
    --border-color: rgba(255, 255, 255, 0.1);

    /* Accent Colors */
    --accent-red: #ff3e3e;
    --accent-red-glow: rgba(255, 62, 62, 0.3);
    --indigo: #6366f1;
    --indigo-glow: rgba(99, 102, 241, 0.3);
    --violet: #6c5ce7;
    --violet-glow: rgba(108, 92, 231, 0.3);
    --cyan: #00cec9;
    --cyan-glow: rgba(0, 206, 201, 0.3);
    --green: #10b981;
    --green-glow: rgba(16, 185, 129, 0.2);
    --tally-green: #00ff88;
    --amber: #f59e0b;
    --recording-red: #ff3b3b;

    /* Text */
    --text-primary: #f0f0f5;
    --text-secondary: rgba(255, 255, 255, 0.65);
    --text-muted: rgba(255, 255, 255, 0.45);
    --text-dim: rgba(255, 255, 255, 0.25);

    /* Typography */
    --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --space-4xl: 128px;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 100px;

    /* Gradients */
    --gradient-accent: linear-gradient(135deg, var(--violet), var(--cyan));
    --gradient-indigo: linear-gradient(90deg, #6366f1, #a855f7);
    --gradient-hero: radial-gradient(circle at 50% 30%, #1a1f3a 0%, #0a0a0f 70%);

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.6);

    /* Transitions */
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Breakpoints (used in media queries) */
    /* Mobile: 480px, Tablet: 768px, Desktop: 1200px, Wide: 1600px */
}