/* ==========================================================================
   BELLARENA - VARIABLES CSS
   ========================================================================== */

:root {
    /* ===== CONTAINER ===== */
    --container: 1440px;
    --container-narrow: 1200px;
    --container-padding: 20px;

    /* ===== COULEURS WINTER (Bleu) ===== */
    --winter-primary: #002ba5;
    --winter-secondary: #fcff83;
    --winter-dark: #0A0047;

    /* ===== COULEURS SUMMER (Jaune) ===== */
    --summer-primary: #fcff83;
    --summer-secondary: #002ba5;
    --summer-dark: #0A0047;

    /* ===== COULEURS COMMUNES ===== */
    --black: #000000;
    --white: #FFFFFF;

    /* ===== FONT FAMILY ===== */
    --font-primary: 'Switzer', sans-serif;
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-medium: 500;
    --fw-bold: 700;

    /* ===== FONT SIZES ===== */
    --fs-hero: 120px;
    --fs-h1: 80px;
    --fs-h2: 60px;
    --fs-h3: 40px;
    --fs-h4: 30px;
    --fs-h5: 24px;
    --fs-body: 18px;
    --fs-small: 16px;
    --fs-tiny: 14px;
    --fs-menu: 60px;
    --fs-nav: 16px;
    --fs-button: 18px;

    /* ===== ESPACEMENTS ===== */
    --space-xs: 8px;
    --space-s: 16px;
    --space-m: 32px;
    --space-l: 48px;
    --space-xl: 80px;
    --space-xxl: 120px;
    --neg-space-xxl: -120px;

    /* ===== SECTIONS ===== */
    --section-padding: 100px;
    --grid-gap: 30px;

    /* ===== HEADER ===== */
    --header-height: 80px;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;

    /* ===== BORDER RADIUS ===== */
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-full: 9999px;

    /* ===== Z-INDEX ===== */
    --z-header: 100;
    --z-menu: 200;
    --z-modal: 300;
}

/* ==========================================================================
   TABLET - max 1024px
   ========================================================================== */
@media screen and (max-width: 1024px) {
    :root {
        --fs-hero: 80px;
        --fs-h1: 60px;
        --fs-h2: 45px;
        --fs-h3: 32px;
        --fs-h4: 26px;
        --fs-menu: 45px;

        --space-xl: 60px;
        --space-xxl: 90px;
        --neg-space-xxl: -90px;

        --section-padding: 70px;
        --grid-gap: 24px;
    }
}

/* ==========================================================================
   MOBILE - max 768px
   ========================================================================== */
@media screen and (max-width: 768px) {
    :root {
        --fs-hero: 50px;
        --fs-h1: 40px;
        --fs-h2: 32px;
        --fs-h3: 26px;
        --fs-h4: 22px;
        --fs-body: 16px;
        --fs-menu: 36px;

        --space-m: 24px;
        --space-l: 32px;
        --space-xl: 48px;
        --space-xxl: 64px;
        --neg-space-xxl: -64px;

        --section-padding: 50px;
        --grid-gap: 16px;

        --header-height: 70px;
    }
}

/* ==========================================================================
   SMALL MOBILE - max 480px
   ========================================================================== */
@media screen and (max-width: 480px) {
    :root {
        --fs-hero: 36px;
        --fs-h1: 32px;
        --fs-h2: 26px;
        --fs-menu: 28px;

        --space-xxl: 50px;
        --section-padding: 40px;
    }
}

/* ==========================================================================
   THEME SWITCHER
   ========================================================================== */
body.theme-winter {
    --theme-primary: var(--winter-primary);
    --theme-secondary: var(--winter-secondary);
    --theme-dark: var(--winter-dark);
    --theme-text: var(--white);
}

body.theme-summer {
    --theme-primary: var(--summer-primary);
    --theme-secondary: var(--summer-secondary);
    --theme-dark: var(--summer-dark);
    --theme-text: var(--summer-secondary);
}