:root {
    /* Brand Colors */
    --color-primary: #ff6b00;
    --color-primary-light: #ff8533;
    --color-primary-dark: #cc5500;
    --color-secondary: #00d4ff;
    --color-secondary-light: #33ddff;
    --color-secondary-dark: #00aacc;
    --color-accent: #7c3aed;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #3b82f6;

    /* Background Colors */
    --bg-base: #0a0a0f;
    --bg-surface: #12121a;
    --bg-elevated: #1a1a2e;
    --bg-card: #1e1e32;
    --bg-hover: #252540;
    --bg-active: #2a2a4e;
    --bg-overlay: rgba(0, 0, 0, 0.75);
    --bg-modal: rgba(10, 10, 15, 0.95);

    /* Text Colors */
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b0;
    --text-muted: #6b6b80;
    --text-inverse: #0a0a0f;

    /* Border Colors */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-focus: var(--color-primary);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    --gradient-dark: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%);
    --gradient-glow: radial-gradient(circle at 50% 0%, rgba(255, 107, 0, 0.15) 0%, transparent 60%);
    --gradient-card: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
    --gradient-header: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-secondary) 100%);
    --gradient-rainbow: linear-gradient(90deg, #ff6b00, #7c3aed, #00d4ff, #10b981, #f59e0b);

    /* Nav Icon Accent Colors */
    --nav-orange: #ff6b00;
    --nav-purple: #7c3aed;
    --nav-cyan: #00d4ff;
    --nav-pink: #ec4899;
    --nav-green: #10b981;
    --nav-blue: #3b82f6;
    --nav-amber: #f59e0b;
    --nav-teal: #14b8a6;
    --nav-slate: #64748b;
    --nav-violet: #8b5cf6;
    --nav-red: #ef4444;

    /* Typography */
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Inter', sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Layout */
    --header-height: 64px;
    --max-content-width: 1400px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow-primary: 0 0 20px rgba(255, 107, 0, 0.3);
    --shadow-glow-secondary: 0 0 20px rgba(0, 212, 255, 0.2);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Z-Index Scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-toast: 700;
    --z-loader: 800;
}

[data-theme="light"] {
    --bg-base: #f5f5fa;
    --bg-surface: #ffffff;
    --bg-elevated: #f0f0f5;
    --bg-card: #ffffff;
    --bg-hover: #e8e8f0;
    --bg-active: #e0e0ea;
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a5e;
    --text-muted: #8a8a9e;
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.15);
}