:root {
    /* Colors - Vibrant Tactical Theme */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    /* Very Light Blue-Grey */
    --color-bg-tertiary: #e2e8f0;

    --color-text-primary: #1e293b;
    /* Slate 800 */
    --color-text-secondary: #475569;
    /* Slate 600 */
    --color-text-inverted: #ffffff;

    /* Accent Colors - VIBRANT */
    --color-accent: #10b981;
    /* Emerald 500 - Bright tactical green */
    --color-accent-dark: #059669;
    /* Emerald 600 */
    --color-accent-light: #34d399;
    /* Emerald 400 */
    --color-accent-contrast: #064e3b;

    /* Brand Colors */
    --color-primary: #0ea5e9;
    /* Sky Blue 500 - Vibrant */
    --color-primary-dark: #0284c7;

    --color-graphite: #1e293b;
    --color-dark: #0f172a;

    /* Status Colors - MORE VIBRANT */
    --color-success: #10b981;
    /* Emerald */
    --color-warning: #f59e0b;
    /* Amber */
    --color-error: #ef4444;
    /* Red */
    --color-info: #3b82f6;
    /* Blue */

    /* Dimensions & Spacing */
    --header-height: 120px;
    --header-height-mobile: 100px;
    --container-width: 1200px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* Fonts */
    --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* Shadows - More pronounced */
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.15);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-accent: 0 8px 20px -4px rgb(16 185 129 / 0.3);
}

/* Dark Mode Support (Class-based for easy toggling) */
.dark-mode {
    --color-bg-primary: #0f172a;
    /* Slate 900 */
    --color-bg-secondary: #1e293b;
    /* Slate 800 */
    --color-bg-tertiary: #334155;
    /* Slate 700 */

    --color-text-primary: #f1f5f9;
    --color-text-secondary: #94a3b8;

    --color-graphite: #ffffff;
}