/* Design System Variables */
:root {
    /* Primary Colors */
    --color-primary: #07111F; /* Midnight Navy */
    --color-primary-dark: #0B1728; /* Dark Navy */
    --color-secondary: #1479FF; /* Electric Blue */
    --color-accent: #20C7E8; /* Cyan */
    
    /* Neutral Colors */
    --color-bg: #F5F7FA; /* Light Background */
    --color-bg-light: #EAF4FF; /* Light Blue */
    --color-white: #FFFFFF;
    --color-text-main: #111827; /* Text Dark */
    --color-text-muted: #64748B; /* Text Muted */
    --color-border: #E2E8F0;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
    --gradient-overlay: linear-gradient(to top, rgba(7, 17, 31, 0.9) 0%, rgba(7, 17, 31, 0) 100%);

    /* Typography */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Spacing & Layout */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;
    --spacing-xxl: 4rem;
    --container-max-width: 1280px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}