/* ========================================
   VARIABLES.CSS - Single Source of Truth
   ======================================== */

:root {
    /* Layout */
    --max-wrap: 1120px;
    --pad-x: 24px;
    --header-h: 160px;
    
    /* Spacing Scale */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --s-1: 8px; 
    --s-2: 12px; 
    --s-3: 16px; 
    --s-4: 24px;
    --s-5: 32px; 
    --s-6: 48px; 
    --s-7: 64px; 
    --s-8: 96px;

    /* Gradients */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --accent-blue: #667eea;
    --accent-purple: #764ba2;

    /* Effects */
    --blur: 20px;
    --radius: 16px;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Logo */
    --logo-size: 140px;
    --logo-spin-duration: 60s;

    /* Light Theme Colors */
    --light-bg: #fafafa;
    --light-surface: rgba(255, 255, 255, 0.9);
    --light-glass: rgba(0, 0, 0, 0.02);
    --light-border: rgba(0, 0, 0, 0.08);
    --light-text: #1a1a1a;
    --light-text-secondary: rgba(0, 0, 0, 0.7);

    /* Dark Theme Colors */
    --dark-bg: #0a0a0f;
    --dark-surface: rgba(15, 15, 25, 0.8);
    --dark-glass: rgba(255, 255, 255, 0.05);
    --dark-border: rgba(255, 255, 255, 0.1);
    --dark-text: #ffffff;
    --dark-text-secondary: rgba(255, 255, 255, 0.7);

}

/* Theme Switching */
[data-theme="light"] {
    --bg: var(--light-bg);
    --surface: var(--light-surface);
    --glass: var(--light-glass);
    --border: var(--light-border);
    --text: var(--light-text);
    --text-secondary: var(--light-text-secondary);
}

[data-theme="dark"] {
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --glass: var(--dark-glass);
    --border: var(--dark-border);
    --text: var(--dark-text);
    --text-secondary: var(--dark-text-secondary);
}