/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
    /* Colors - Light Mode (default) */
    --bg-primary: #FFFFFF;
    --text-primary: #000000;
    --accent: #FFD700;
    
    /* Typography */
    --font-heading: 'Anton', sans-serif;
    --font-body: 'Work Sans', sans-serif;
    
    /* Spacing Scale */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-index scale */
    --z-header: 100;
    --z-floating-btn: 200;
    --z-modal: 300;
    --z-login-modal: 400;
}

/* Dark Mode */
[data-theme="dark"] {
    --bg-primary: #000000;
    --text-primary: #FFFFFF;
}

/* Psycho Mode */
[data-theme="psycho"] {
    --bg-primary: #120338;
    --text-primary: #00FFD4;
    --accent: #FF2E97;
}