/**
 * CSS Variables
 * Theme definitions and design tokens
 */

/* Dark Theme (Default) */
:root,
[data-theme="dark"] {
    /* Background colors */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a24;
    --bg-elevated: #22222e;
    --bg-hover: #2a2a38;
    
    /* Surface colors */
    --surface-1: #16161e;
    --surface-2: #1e1e28;
    --surface-3: #262632;
    
    /* Text colors */
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b0;
    --text-tertiary: #707080;
    --text-muted: #505060;
    
    /* Accent colors */
    --accent-primary: #00d4aa;
    --accent-primary-hover: #00e8bc;
    --accent-primary-muted: rgba(0, 212, 170, 0.15);
    --accent-secondary: #7c5cff;
    --accent-secondary-hover: #9178ff;
    
    /* Status colors */
    --success: #00c853;
    --success-muted: rgba(0, 200, 83, 0.15);
    --warning: #ffab00;
    --warning-muted: rgba(255, 171, 0, 0.15);
    --error: #ff4757;
    --error-muted: rgba(255, 71, 87, 0.15);
    --info: #00b4d8;
    --info-muted: rgba(0, 180, 216, 0.15);
    
    /* Border colors */
    --border-primary: #2a2a38;
    --border-secondary: #3a3a48;
    --border-focus: var(--accent-primary);
    
    /* Shadows */
    --shadow-sm: 0 2px 4px 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: 0 0 20px rgba(0, 212, 170, 0.3);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    --gradient-surface: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
    
    /* Typography */
    --font-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Font sizes */
    --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: 2rem;
    --text-4xl: 2.5rem;
    
    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* 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;
    
    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* Z-index layers */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-toast: 400;
    
    /* Layout */
    --nav-height: 60px;
    --container-max: 1200px;
    --sidebar-width: 280px;
}

/* Light Theme */
[data-theme="light"] {
    /* Background colors */
    --bg-primary: #f8f9fc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f2f5;
    --bg-elevated: #ffffff;
    --bg-hover: #e8eaed;
    
    /* Surface colors */
    --surface-1: #ffffff;
    --surface-2: #f5f6f8;
    --surface-3: #ebedf0;
    
    /* Text colors */
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a5e;
    --text-tertiary: #6a6a7e;
    --text-muted: #9a9aae;
    
    /* Accent colors */
    --accent-primary: #00a884;
    --accent-primary-hover: #00c49a;
    --accent-primary-muted: rgba(0, 168, 132, 0.1);
    --accent-secondary: #6b4ce6;
    --accent-secondary-hover: #8266f0;
    
    /* Status colors */
    --success: #00a854;
    --success-muted: rgba(0, 168, 84, 0.1);
    --warning: #e69500;
    --warning-muted: rgba(230, 149, 0, 0.1);
    --error: #e63950;
    --error-muted: rgba(230, 57, 80, 0.1);
    --info: #0099b8;
    --info-muted: rgba(0, 153, 184, 0.1);
    
    /* Border colors */
    --border-primary: #e0e2e6;
    --border-secondary: #d0d2d6;
    --border-focus: var(--accent-primary);
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px rgba(0, 168, 132, 0.2);
}