/* CSS Variables - Colors, Spacing, Breakpoints */

:root {
    /* Primary Colors */
    --color-light-blue: #2EB2E3;
    --color-navy-blue: #1A4C8B;
    --color-white: #FFFFFF;

    /* Secondary Colors */
    --color-orange: #FFB334;
    --color-red: #EE4D2D;

    /* Accent Colors */
    --color-accent-light-1: #CDF1FF;
    --color-accent-light-2: #95E1FF;
    --color-accent-blue-1: #4A7FC2;
    --color-accent-navy: #1A375B;

    --color-accent-cream: #FFE1AF;
    --color-accent-yellow: #FFC562;
    --color-accent-pink: #FFA28F;
    --color-accent-maroon: #9B1A00;

    /* Typography */
    --font-header: 'Coolvetica', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Font Sizes - Desktop */
    --fs-hero: 48px;
    --fs-h1: 36px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-body-large: 18px;
    --fs-body: 16px;
    --fs-small: 14px;

    /* Font Sizes - Mobile */
    --fs-hero-mobile: 32px;
    --fs-h1-mobile: 24px;
    --fs-h2-mobile: 20px;
    --fs-h3-mobile: 18px;
    --fs-body-large-mobile: 16px;
    --fs-body-mobile: 14px;
    --fs-small-mobile: 12px;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    --spacing-3xl: 96px;

    /* Spacing - Mobile */
    --spacing-xs-mobile: 6px;
    --spacing-sm-mobile: 12px;
    --spacing-md-mobile: 18px;
    --spacing-lg-mobile: 24px;
    --spacing-xl-mobile: 32px;
    --spacing-2xl-mobile: 48px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-index layers */
    --z-overlay: 1000;
    --z-modal: 2000;
    --z-navigation: 3000;

    /* Container Max Width */
    --container-max: 1200px;
    --container-padding: 20px;
}

/* Breakpoints for media queries */
/* Usage: @media (max-width: 1199px) for tablet */
/* Usage: @media (max-width: 767px) for mobile */
/* Usage: @media (max-width: 479px) for small mobile */