/* Design Tokens - AhteVerse */

:root {
    /* Brand Colors */
    --white: #FFFFFF;
    --black: #000000;

    /* Accents */
    --magenta: #FF00FF;
    --electric-blue: #007BFF;
    --neon-green: #39FF14;
    --orange: #FF4500;

    /* Semantic Defaults (Light Theme by Default) */
    --bg-primary: var(--white);
    --bg-secondary: #f4f4f9;
    --text-primary: var(--black);
    --text-secondary: #333333;
    --border-color: rgba(0, 0, 0, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.1);
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
    
    /* Glows */
    --glow-magenta: 0 0 15px var(--magenta);
    --glow-blue: 0 0 15px var(--electric-blue);
    --glow-green: 0 0 15px var(--neon-green);
    --glow-orange: 0 0 15px var(--orange);

    /* Spacing */
    --header-height: 80px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;

    /* Typography */
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Lato', sans-serif;
}

/* Dark Theme Overrides */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: var(--black);
        --bg-secondary: #0a0a0c;
        --text-primary: var(--white);
        --text-secondary: #cccccc;
        --border-color: rgba(255, 255, 255, 0.1);
        --glass-bg: rgba(0, 0, 0, 0.7);
        --glass-border: rgba(255, 255, 255, 0.1);
        
        --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
        --shadow-lg: 0 8px 24px rgba(0,0,0,0.7);
    }
}

[data-theme="dark"] {
    --bg-primary: var(--black);
    --bg-secondary: #0a0a0c;
    --text-primary: var(--white);
    --text-secondary: #cccccc;
    --border-color: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(0, 0, 0, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.7);
}