/* ===================================
   CSS Custom Properties (Variables)
   Modern CSS3 Enhancement Layer
   =================================== */

:root {
    /* ===== Color Palette ===== */
    --color-primary: #002868;
    --color-primary-dark: #001a42;
    --color-primary-light: #003d8a;
    
    --color-secondary: #BF0A30;
    --color-secondary-dark: #8f0824;
    --color-secondary-light: #e60c3a;
    
    --color-dark: #3d3d3d;
    --color-text: #3d3d3d;
    --color-muted: #bbb;
    --color-light: #ffffff;
    --color-border: #eee;
    --color-border-light: #e1e1e1;
    
    /* ===== Typography ===== */
    --font-primary: 'Oswald', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
    --font-accent: 'Raleway', sans-serif;
    
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 15px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 36px;
    --font-size-5xl: 40px;
    --font-size-6xl: 48px;
    --font-size-7xl: 52px;
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* ===== Spacing Scale ===== */
    --spacing-xs: 8px;
    --spacing-sm: 15px;
    --spacing-md: 30px;
    --spacing-lg: 50px;
    --spacing-xl: 80px;
    --spacing-2xl: 100px;
    --spacing-3xl: 120px;
    
    /* ===== Transitions ===== */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.5s ease;
    --transition-slow: 0.8s ease;
    --transition-curve: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===== Z-Index Layers ===== */
    --z-base: 1;
    --z-dropdown: 10;
    --z-overlay: 80;
    --z-sticky: 100;
    --z-fixed: 111;
    --z-modal-backdrop: 1031;
    --z-modal: 1111;
    --z-modal-high: 2032;
    --z-tooltip: 9999;
    --z-cursor: 999999999;
    
    /* ===== Border Radius ===== */
    --radius-xs: 2px;
    --radius-sm: 0.5em;
    --radius-md: 10px;
    --radius-lg: 20px;
    --radius-xl: 25px;
    --radius-full: 50px;
    --radius-circle: 50%;
    
    /* ===== Shadows ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 0 4px 1px rgba(101, 101, 101, 0.2);
    --shadow-md: 0 0 15px var(--color-border);
    --shadow-lg: 0 10px 10px -10px rgba(0, 0, 0, 0.35);
    --shadow-xl: 1px 1px 15px var(--color-border-light);
    
    /* ===== Layout ===== */
    --container-max-width: 1200px;
    --header-height: 100px;
    --header-height-scrolled: 70px;
    
    /* ===== Animations ===== */
    --animation-duration: 1s;
    --animation-timing: ease-in-out;
}

/* ===== Dark Mode Support (Optional) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Override variables for dark mode if needed */
        --color-text: #e0e0e0;
        --color-border: #2a2a2a;
    }
}

/* ===== Utility Classes Using Variables ===== */

.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

/* Spacing Utilities */
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }

.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }

/* Transition Utilities */
.transition-fast { transition: all var(--transition-fast); }
.transition-normal { transition: all var(--transition-normal); }
.transition-slow { transition: all var(--transition-slow); }