/* =====================================================
   DESIGN SYSTEM - CSS VARIABLES - ULTRA MODERNE
   ===================================================== */

:root {
    /* PRIMARY COLORS - C2A Brand (Modern Green/Teal) */
    --primary: #8DC63F;
    --primary-light: #6AA84F;
    --primary-lighter: #a8d868;
    --primary-dark: #00AEEF;
    --primary-soft: #26A9B7;
    
    /* SECONDARY COLORS */
    --secondary: #ACC43F;
    --secondary-light: #FFFFFF;
    --secondary-dark: #F2F2F2;
    --secondary-soft: #c9c9c9;
    
    /* ACCENT COLORS */
    --accent: #1A1A1A;
    --accent-light: #2E3A45;
    --accent-dark: #5CB85C;
    --accent-soft: #D9534F;
    
    /* ELEGANT COLORS */
    --elegant: #8b7ca3;
    --elegant-light: #a394b5;
    --elegant-dark: #6f5f85;
    
    /* NEUTRAL PALETTE - Soft & Elegant */
    --white: #ffffff;
    --off-white: #fdfdfe;
    --cream: #FCFDFA;
    --light-gray: #f7f8f9;
    --medium-gray: #e8ecf0;
    --dark-gray: #556572;
    --charcoal: #2c3e50;
    --black: #1f2937;
    
    /* TEXT COLORS - Refined */
    --text-primary: #2c3e50;
    --text-secondary: #6b7c88;
    --text-light: #8a9aa7;
    --text-muted: #b8c5d1;
    --text-inverse: #ffffff;
    
    /* SHADOWS - Gradient & Elegant */
    --shadow-subtle: 0 2px 12px rgba(44, 62, 80, 0.04);
    --shadow-soft: 0 4px 25px rgba(44, 62, 80, 0.08);
    --shadow-medium: 0 8px 35px rgba(44, 62, 80, 0.12);
    --shadow-strong: 0 15px 50px rgba(44, 62, 80, 0.15);
    --shadow-dramatic: 0 25px 80px rgba(44, 62, 80, 0.2);
    --shadow-neon: 0 0 20px rgba(8, 139, 194, 0.3);
    
    /* TRANSITIONS - Fluid & Smooth */
    --transition-swift: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-soft: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: all 0.3s ease-in-out;
    --transition-elegant: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* BORDER RADIUS - Organic */
    --radius-small: 8px;
    --radius-soft: 12px;
    --radius-medium: 16px;
    --radius-large: 24px;
    --radius-xlarge: 32px;
    
    /* SPACING - Harmonious */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    /* GRADIENTS - Modern & Sophisticated */
    --gradient-primary: linear-gradient(135deg, #8DC63F 0%, #6AA84F 100%);
    --gradient-primary-reverse: linear-gradient(135deg, #6AA84F 0%, #8DC63F 100%);
    --gradient-secondary: linear-gradient(135deg, #ACC43F 0%, #FFFFFF 100%);
    --gradient-accent: linear-gradient(135deg, #8DC63F 0%, #00AEEF 100%);
    --gradient-soft: linear-gradient(135deg, #FCFDFA 0%, #FFFFFF 100%);
    --gradient-dark: linear-gradient(135deg, #1A1A1A 0%, #2E3A45 100%);
    --gradient-overlay: rgba(0, 0, 0, 0.5);
    
    /* FONT SIZES - Responsive with clamp */
    --font-h1: clamp(2.5rem, 5vw, 4rem);
    --font-h2: clamp(2rem, 4vw, 3rem);
    --font-h3: clamp(1.5rem, 3vw, 2.25rem);
    --font-h4: clamp(1.25rem, 2.5vw, 1.75rem);
    --font-h5: clamp(1.1rem, 2vw, 1.5rem);
    --font-h6: clamp(1rem, 1.5vw, 1.25rem);
    --font-body: 1rem;
    --font-small: 0.875rem;
    --font-xs: 0.75rem;
    
    /* Z-INDEX LAYERS */
    --z-dropdown: 100;
    --z-sticky: 1000;
    --z-fixed: 2000;
    --z-modal: 3000;
    --z-tooltip: 4000;
    --z-loading: 9999;
    
    /* LINE HEIGHTS */
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;
    
    /* LETTER SPACING */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.05em;
    
    /* BACKDROP FILTERS */
    --backdrop-blur: blur(20px);
    --backdrop-blur-light: blur(10px);
    --backdrop-blur-heavy: blur(30px);
}

/* Dark Mode Variant (Optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --charcoal: #f9fafb;
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-light: #94a3b8;
        --shadow-soft: 0 4px 25px rgba(0, 0, 0, 0.3);
        --medium-gray: #1e293b;
        --light-gray: #0f172a;
    }
}

/* Print Styles */
@media print {
    :root {
        --shadow-soft: none;
        --shadow-medium: none;
        --shadow-strong: none;
    }
}