/* CSS Custom Properties (Design Tokens) */
:root {
    /* Colors */
    --color-bg-primary: #0B0C0F;
    --color-bg-surface: #141418;
    --color-bg-surface-elevated: #1E1F24;
    
    --color-text-primary: #F5F7FA;
    --color-text-secondary: #A0A3AA;
    
    --color-accent-red: #FF3B30;
    --color-accent-blue: #2F80ED;
    --color-success: #16A34A;
    --color-warning: #F59E0B;
    
    /* Borders */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(255, 255, 255, 0.2);
    
    /* Typography */
    --font-heading: 'Figtree', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Monaco', 'Menlo', monospace;
    
    /* Spacing - 8px grid system */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */
    --spacing-xxl: 3rem;      /* 48px */
    --spacing-xxxl: 4rem;     /* 64px */
    
    /* Section spacing */
    --spacing-section: 5rem;        /* 80px */
    --spacing-section-mobile: 3rem; /* 48px */
    
    /* Border radius */
    --radius-sm: 0.25rem;     /* 4px */
    --radius-md: 0.5rem;      /* 8px */
    --radius-lg: 0.75rem;     /* 12px */
    --radius-xl: 1rem;        /* 16px */
    --radius-pill: 50rem;     /* pill shape */
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    
    /* Glass blur effect */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(10px);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* Z-index scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Layout breakpoints */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    :root {
        /* Already optimized for dark theme */
    }
}

/* Light theme override (if needed) */
@media (prefers-color-scheme: light) {
    :root {
        --color-bg-primary: #FFFFFF;
        --color-bg-surface: #F8F9FA;
        --color-bg-surface-elevated: #FFFFFF;
        
        --color-text-primary: #1A1A1A;
        --color-text-secondary: #6B7280;
        
        --color-border: rgba(0, 0, 0, 0.1);
        --color-border-hover: rgba(0, 0, 0, 0.2);
        
        --glass-bg: rgba(255, 255, 255, 0.8);
        --glass-border: rgba(0, 0, 0, 0.1);
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --color-border: rgba(255, 255, 255, 0.3);
        --color-border-hover: rgba(255, 255, 255, 0.5);
        --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
        --shadow-md: 0 6px 8px -1px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 12px 16px -3px rgba(0, 0, 0, 0.5);
    }
}

/* Focus indicator customization */
:root {
    --focus-ring-color: var(--color-accent-blue);
    --focus-ring-offset: 2px;
    --focus-ring-width: 2px;
}

/* Animation timing functions */
:root {
    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
}