/* ============================================
   CAMPUS LANE HOLDINGS - THEME VARIABLES
   Complete Light/Dark Mode System
   ============================================ */

:root {
    /* ===== COLORS - LIGHT MODE (DEFAULT) ===== */
    
    /* Primary Brand Colors */
    --clh-primary: #2C5F7C;
    --clh-primary-light: #3A7CA5;
    --clh-primary-dark: #1E4158;
    --clh-primary-rgb: 44, 95, 124;
    
    --clh-secondary: #4A8F3C;
    --clh-secondary-light: #5FA94F;
    --clh-secondary-dark: #3A7230;
    --clh-secondary-rgb: 74, 143, 60;
    
    --clh-accent: #D4AF37;
    --clh-accent-light: #E4BF47;
    --clh-accent-dark: #B89F2F;
    --clh-accent-rgb: 212, 175, 55;
    
    /* Neutral Colors - Light Mode */
    --clh-bg-primary: #FFFFFF;
    --clh-bg-secondary: #F8F9FA;
    --clh-bg-tertiary: #F1F3F5;
    --clh-bg-elevated: #FFFFFF;
    
    --clh-text-primary: #2C3E50;
    --clh-text-secondary: #5D6D7E;
    --clh-text-tertiary: #7F8C8D;
    --clh-text-muted: #95A5A6;
    --clh-text-inverse: #FFFFFF;
    
    --clh-border-primary: #E0E6ED;
    --clh-border-secondary: #DEE2E6;
    --clh-border-light: #F1F3F5;
    
    /* Status Colors */
    --clh-success: #27AE60;
    --clh-success-light: #2ECC71;
    --clh-success-dark: #1E8449;
    --clh-success-bg: #D5F4E6;
    
    --clh-warning: #F39C12;
    --clh-warning-light: #F5B041;
    --clh-warning-dark: #D68910;
    --clh-warning-bg: #FCF3CF;
    
    --clh-error: #E74C3C;
    --clh-error-light: #EC7063;
    --clh-error-dark: #C0392B;
    --clh-error-bg: #FADBD8;
    
    --clh-info: #3498DB;
    --clh-info-light: #5DADE2;
    --clh-info-dark: #2874A6;
    --clh-info-bg: #D6EAF8;
    
    /* Overlay & Shadow */
    --clh-overlay: rgba(0, 0, 0, 0.5);
    --clh-overlay-light: rgba(0, 0, 0, 0.3);
    --clh-overlay-dark: rgba(0, 0, 0, 0.7);
    
    --clh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --clh-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --clh-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --clh-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);
    --clh-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    
    /* ===== TYPOGRAPHY ===== */
    --clh-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --clh-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --clh-font-mono: 'Fira Code', 'Courier New', monospace;
    
    --clh-font-size-xs: 0.75rem;      /* 12px */
    --clh-font-size-sm: 0.875rem;     /* 14px */
    --clh-font-size-base: 1rem;       /* 16px */
    --clh-font-size-md: 1.125rem;     /* 18px */
    --clh-font-size-lg: 1.25rem;      /* 20px */
    --clh-font-size-xl: 1.5rem;       /* 24px */
    --clh-font-size-2xl: 1.875rem;    /* 30px */
    --clh-font-size-3xl: 2.25rem;     /* 36px */
    --clh-font-size-4xl: 3rem;        /* 48px */
    --clh-font-size-5xl: 3.75rem;     /* 60px */
    
    --clh-font-weight-light: 300;
    --clh-font-weight-normal: 400;
    --clh-font-weight-medium: 500;
    --clh-font-weight-semibold: 600;
    --clh-font-weight-bold: 700;
    --clh-font-weight-extrabold: 800;
    
    --clh-line-height-tight: 1.2;
    --clh-line-height-normal: 1.5;
    --clh-line-height-relaxed: 1.75;
    --clh-line-height-loose: 2;
    
    /* ===== SPACING ===== */
    --clh-space-0: 0;
    --clh-space-1: 0.25rem;     /* 4px */
    --clh-space-2: 0.5rem;      /* 8px */
    --clh-space-3: 0.75rem;     /* 12px */
    --clh-space-4: 1rem;        /* 16px */
    --clh-space-5: 1.25rem;     /* 20px */
    --clh-space-6: 1.5rem;      /* 24px */
    --clh-space-8: 2rem;        /* 32px */
    --clh-space-10: 2.5rem;     /* 40px */
    --clh-space-12: 3rem;       /* 48px */
    --clh-space-16: 4rem;       /* 64px */
    --clh-space-20: 5rem;       /* 80px */
    --clh-space-24: 6rem;       /* 96px */
    --clh-space-32: 8rem;       /* 128px */
    
    /* ===== LAYOUT ===== */
    --clh-max-width-xs: 320px;
    --clh-max-width-sm: 640px;
    --clh-max-width-md: 768px;
    --clh-max-width-lg: 1024px;
    --clh-max-width-xl: 1280px;
    --clh-max-width-2xl: 1536px;
    --clh-max-width-full: 100%;
    
    --clh-container-padding: var(--clh-space-4);
    --clh-header-height: 80px;
    --clh-footer-height: auto;
    
    /* ===== BORDER RADIUS ===== */
    --clh-radius-none: 0;
    --clh-radius-sm: 0.25rem;    /* 4px */
    --clh-radius-md: 0.5rem;     /* 8px */
    --clh-radius-lg: 0.75rem;    /* 12px */
    --clh-radius-xl: 1rem;       /* 16px */
    --clh-radius-2xl: 1.5rem;    /* 24px */
    --clh-radius-3xl: 2rem;      /* 32px */
    --clh-radius-full: 9999px;
    
    /* ===== TRANSITIONS ===== */
    --clh-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --clh-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --clh-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --clh-transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    --clh-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --clh-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --clh-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --clh-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ===== Z-INDEX LAYERS ===== */
    --clh-z-dropdown: 1000;
    --clh-z-sticky: 1020;
    --clh-z-fixed: 1030;
    --clh-z-modal-backdrop: 1040;
    --clh-z-modal: 1050;
    --clh-z-popover: 1060;
    --clh-z-tooltip: 1070;
    --clh-z-notification: 1080;
}

/* ============================================
   DARK MODE VARIABLES
   ============================================ */

[data-theme="dark"] {
    /* Primary colors remain the same but adjusted for dark mode */
    --clh-primary: #4A9FCC;
    --clh-primary-light: #5DB4E0;
    --clh-primary-dark: #3A7CA5;
    
    --clh-secondary: #5FA94F;
    --clh-secondary-light: #6FBD5F;
    --clh-secondary-dark: #4A8F3C;
    
    --clh-accent: #E4BF47;
    --clh-accent-light: #F0CF5A;
    --clh-accent-dark: #D4AF37;
    
    /* Dark Mode Backgrounds */
    --clh-bg-primary: #0F1419;
    --clh-bg-secondary: #1A1F2E;
    --clh-bg-tertiary: #252C3A;
    --clh-bg-elevated: #2A3142;
    
    /* Dark Mode Text */
    --clh-text-primary: #E4E6EB;
    --clh-text-secondary: #B8BBBF;
    --clh-text-tertiary: #8A8D91;
    --clh-text-muted: #65676B;
    --clh-text-inverse: #0F1419;
    
    /* Dark Mode Borders */
    --clh-border-primary: #3A3F4B;
    --clh-border-secondary: #2E3440;
    --clh-border-light: #252C3A;
    
    /* Status Colors - Adjusted for dark mode */
    --clh-success: #2ECC71;
    --clh-success-light: #52D98C;
    --clh-success-dark: #27AE60;
    --clh-success-bg: #1A4D2E;
    
    --clh-warning: #F5B041;
    --clh-warning-light: #F7C564;
    --clh-warning-dark: #F39C12;
    --clh-warning-bg: #5D4A1F;
    
    --clh-error: #EC7063;
    --clh-error-light: #F1948A;
    --clh-error-dark: #E74C3C;
    --clh-error-bg: #5C1F1B;
    
    --clh-info: #5DADE2;
    --clh-info-light: #85C1E9;
    --clh-info-dark: #3498DB;
    --clh-info-bg: #1F3A5D;
    
    /* Dark Mode Overlays & Shadows */
    --clh-overlay: rgba(0, 0, 0, 0.7);
    --clh-overlay-light: rgba(0, 0, 0, 0.5);
    --clh-overlay-dark: rgba(0, 0, 0, 0.85);
    
    --clh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --clh-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --clh-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --clh-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);
    --clh-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7);
}

/* ============================================
   THEME TRANSITION
   ============================================ */

body,
body * {
    transition: background-color var(--clh-transition-base),
                color var(--clh-transition-base),
                border-color var(--clh-transition-base),
                box-shadow var(--clh-transition-base);
}

/* Disable transitions during theme initialization */
body.theme-loading,
body.theme-loading * {
    transition: none !important;
}

/* ============================================
   SYSTEM PREFERENCE DETECTION
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Apply dark mode variables if no explicit theme is set */
        --clh-primary: #4A9FCC;
        --clh-bg-primary: #0F1419;
        --clh-bg-secondary: #1A1F2E;
        --clh-text-primary: #E4E6EB;
        --clh-text-secondary: #B8BBBF;
        /* Add all dark mode variables here */
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --clh-border-primary: currentColor;
        --clh-shadow-md: 0 0 0 2px currentColor;
    }
}