/**
 * Theme Variables - Easy Customization
 * Change these values to customize the entire theme
 */

:root {
    /* Primary Brand Colors */
    --primary-purple: #6842FF;
    --primary-purple-light: #9D7FFF;
    --primary-purple-dark: #5535CC;
    
    /* Background Colors */
    --bg-primary: #0C0D14;
    --bg-secondary: #212233;
    --bg-card: rgba(55, 57, 82, 0.4);
    --bg-card-hover: rgba(104, 66, 255, 0.2);
    
    /* Text Colors */
    --text-primary: #F9FAFF;
    --text-secondary: #AAADBE;
    --text-muted: #55566A;
    
    /* Border Colors */
    --border-default: rgba(104, 66, 255, 0.1);
    --border-focus: #6842FF;
    --border-hover: rgba(104, 66, 255, 0.4);
    
    /* Shadow Colors */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(104, 66, 255, 0.3);
    --shadow-xl: 0 12px 32px rgba(104, 66, 255, 0.4);
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50%;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-Index Layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Typography */
    --font-family: '__Nunito_c77b14', '__Nunito_Fallback_c77b14', Arial, "Helvetica Neue", Helvetica, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    
    --font-weight-normal: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    /* Animation Durations */
    --duration-instant: 0.1s;
    --duration-fast: 0.2s;
    --duration-base: 0.3s;
    --duration-slow: 0.5s;
    --duration-slower: 0.8s;
    
    /* Blur Effects */
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 12px;
    --blur-xl: 16px;
    
    /* Opacity Levels */
    --opacity-disabled: 0.4;
    --opacity-hover: 0.8;
    --opacity-active: 0.9;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-purple), var(--primary-purple-light));
    --gradient-overlay: linear-gradient(to top, rgba(12, 13, 20, 0.95), rgba(12, 13, 20, 0.7));
    --gradient-text: linear-gradient(135deg, #fff 0%, #c7c9ff 100%);
    --gradient-shimmer: linear-gradient(90deg, 
        rgba(55, 57, 82, 0.3) 0%, 
        rgba(104, 66, 255, 0.2) 50%, 
        rgba(55, 57, 82, 0.3) 100%);
}

/* Dark Mode Variables (Optional - for future implementation) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Already dark by default */
    }
}

/* Light Mode Variables (Optional - for future implementation) */
[data-theme="light"] {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F5;
    --bg-card: rgba(255, 255, 255, 0.9);
    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --text-muted: #999999;
}

/* High Contrast Mode (Accessibility) */
@media (prefers-contrast: high) {
    :root {
        --primary-purple: #7C5CFF;
        --border-focus: #FFFFFF;
        --text-primary: #FFFFFF;
    }
}

/* Reduced Motion (Accessibility) */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-base: 0s;
        --transition-slow: 0s;
        --duration-instant: 0s;
        --duration-fast: 0s;
        --duration-base: 0s;
        --duration-slow: 0s;
        --duration-slower: 0s;
    }
}

/* Usage Examples:
 *
 * .my-element {
 *     background: var(--bg-card);
 *     color: var(--text-primary);
 *     border-radius: var(--radius-md);
 *     padding: var(--spacing-md);
 *     transition: all var(--transition-base);
 *     box-shadow: var(--shadow-md);
 * }
 *
 * .my-element:hover {
 *     background: var(--bg-card-hover);
 *     box-shadow: var(--shadow-lg);
 * }
 */