/* CSS Variables - Design System */
:root {
    /* Colors - Metal Elegance Palette */
    --primary-dark: #0f1419;
    --primary-darker: #08090c;
    --metal-silver: #c0c0c0;
    --metal-gray: #4a4a4a;
    --metal-dark-gray: #2a2a2a;
    --accent-gold: #d4af37;
    --accent-blue: #1e90ff;
    --accent-cyan: #00bfff;
    --accent-white: #f0f0f0;

    --neutral-white: #ffffff;
    --neutral-light: #f5f5f5;
    --neutral-gray: #8a8a8a;
    --neutral-dark-gray: #2a2a2a;

    /* Gradients */
    --gradient-metal: linear-gradient(135deg, #c0c0c0 0%, #808080 50%, #4a4a4a 100%);
    --gradient-gold-blue: linear-gradient(135deg, #d4af37, #1e90ff);
    --gradient-dark-metal: linear-gradient(135deg, #0f1419, #08090c);
    --gradient-planet: radial-gradient(circle at 30% 30%, #1e90ff, #0f1419);

    /* Typography */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3rem;
    --font-size-5xl: 4rem;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 40px rgba(212, 175, 55, 0.8), 0 0 80px rgba(30, 144, 255, 0.5);
    --shadow-inset: inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.5);

    /* Background & Text (always dark) */
    --bg-primary: #050507;
    --bg-secondary: #0a0c10;
    --bg-surface: rgba(12, 14, 20, 0.85);
    --text-primary: #f0f0f0;
    --text-secondary: #8a8a9a;
    --text-muted: #4a4a5a;

    /* Z-indexes */
    --z-base: 1;
    --z-overlay: 10;
    --z-modal: 100;
    --z-navbar: 50;
    --z-sidepanel: 200;
    --z-tooltip: 300;

    /* Transitions */
    --transition-fast: 150ms ease-out;
    --transition-base: 300ms ease-out;
    --transition-slow: 500ms ease-out;
    --transition-slower: 800ms ease-out;

    /* Animation Durations */
    --anim-duration-short: 0.3s;
    --anim-duration-medium: 0.6s;
    --anim-duration-long: 1s;
    --anim-duration-xlong: 2s;
}

/* Dark mode (system default) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #050507;
        --bg-secondary: #0a0c10;
        --text-primary: #f0f0f0;
        --text-secondary: #8a8a9a;
    }
}

/* Light mode fallback */
@media (prefers-color-scheme: light) {
    :root {
        --bg-primary: #050507;
        --bg-secondary: #0a0c10;
        --text-primary: #f0f0f0;
        --text-secondary: #8a8a9a;
    }
}

/* Force dark mode */
html[data-theme="dark"],
body {
    --bg-primary: var(--primary-dark);
    --bg-secondary: var(--primary-darker);
    --text-primary: var(--neutral-white);
    --text-secondary: var(--neutral-gray);
    color-scheme: dark;
}