:root {
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, Monaco, Consolas, monospace;

    /* Base Cyber Dark Surfaces */
    --bg-base: #060913;
    --bg-surface: #0c1424;
    --bg-surface-elevated: #131f36;
    --bg-surface-hover: #1a2a47;
    --bg-surface-active: #22375c;
    --bg-glass: rgba(12, 20, 36, 0.75);
    --bg-glass-elevated: rgba(19, 31, 54, 0.85);

    /* Borders */
    --border-subtle: #17243c;
    --border-medium: #233659;
    --border-highlight: rgba(0, 242, 254, 0.25);
    --border-glass: rgba(255, 255, 255, 0.08);

    /* Text Colors */
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-dim: #64748b;

    /* Studio Status Indicators */
    --status-success: #10b981;
    --status-warning: #f59e0b;
    --status-danger: #ef4444;
    --status-info: #00f2fe;

    /* Radii & Elevation */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows & Glows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 16px -2px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 30px -4px rgba(0, 0, 0, 0.6), 0 8px 10px -4px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 25px var(--accent-glow);

    /* Smooth Transitions */
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Default Accent: Castium Electric Cyan */
    --accent: #00f2fe;
    --accent-hover: #38bdf8;
    --accent-active: #0284c7;
    --accent-glow: rgba(0, 242, 254, 0.4);
    --accent-surface: rgba(0, 242, 254, 0.12);
    --accent-border: rgba(0, 242, 254, 0.35);
    --accent-gradient: linear-gradient(135deg, #00f2fe 0%, #3b82f6 50%, #7000ff 100%);
}

/* Castium Electric Cyan (Default) */
[data-theme="cyan"], :root {
    --accent: #00f2fe;
    --accent-hover: #38bdf8;
    --accent-active: #0284c7;
    --accent-glow: rgba(0, 242, 254, 0.4);
    --accent-surface: rgba(0, 242, 254, 0.12);
    --accent-border: rgba(0, 242, 254, 0.35);
    --accent-gradient: linear-gradient(135deg, #00f2fe 0%, #3b82f6 50%, #7000ff 100%);
}

/* Neon Violet Theme */
[data-theme="purple"] {
    --accent: #a855f7;
    --accent-hover: #c084fc;
    --accent-active: #9333ea;
    --accent-glow: rgba(168, 85, 247, 0.45);
    --accent-surface: rgba(168, 85, 247, 0.12);
    --accent-border: rgba(168, 85, 247, 0.35);
    --accent-gradient: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
}

/* Broadcast Red / ON AIR Theme */
[data-theme="onair"] {
    --accent: #ef4444;
    --accent-hover: #f87171;
    --accent-active: #dc2626;
    --accent-glow: rgba(239, 68, 68, 0.5);
    --accent-surface: rgba(239, 68, 68, 0.12);
    --accent-border: rgba(239, 68, 68, 0.4);
    --accent-gradient: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
}

/* Vintage Amber Radio Theme */
[data-theme="amber"] {
    --accent: #f59e0b;
    --accent-hover: #fbbf24;
    --accent-active: #d97706;
    --accent-glow: rgba(245, 158, 11, 0.4);
    --accent-surface: rgba(245, 158, 11, 0.12);
    --accent-border: rgba(245, 158, 11, 0.35);
    --accent-gradient: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
}

/* Matrix Emerald VU Theme */
[data-theme="emerald"] {
    --accent: #10b981;
    --accent-hover: #34d399;
    --accent-active: #059669;
    --accent-glow: rgba(16, 185, 129, 0.4);
    --accent-surface: rgba(16, 185, 129, 0.12);
    --accent-border: rgba(16, 185, 129, 0.35);
    --accent-gradient: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
}

/* Dynamic Live Album Art Sync Theme */
[data-theme="albumsync"] {
    --accent: var(--album-accent, #00f2fe);
    --accent-hover: var(--album-accent-hover, #38bdf8);
    --accent-active: var(--album-accent-active, #0284c7);
    --accent-glow: var(--album-accent-glow, rgba(0, 242, 254, 0.4));
    --accent-surface: var(--album-accent-surface, rgba(0, 242, 254, 0.12));
    --accent-border: var(--album-accent-border, rgba(0, 242, 254, 0.35));
    --accent-gradient: var(--album-accent-gradient, linear-gradient(135deg, #00f2fe 0%, #3b82f6 50%, #7000ff 100%));
}