/* ========================================
   VARIABLES CSS - DESIGN SYSTEM
   ======================================== */

:root {
    /* ---- Typographie ---- */
    --font-main: "Authentic-90", Arial, sans-serif;
    --font-size-base: 16px;
    --line-height: 1.4;

    /* ---- Couleurs ---- */
    --color-text: #000000;
    --color-bg: #ffffff;
    --color-link: #000000;
    --color-link-hover: #000000;

    /* ---- Espacements ---- */
    --padding-page: 20px;
    --gap-desktop: 20px;
    --gap-mobile: 10px;
    --gap-small: 5px;
    --gap-medium: 15px;
    --gap-section: 30px;

    /* ---- Grid ---- */
    --grid-columns-desktop: 8;
    --grid-columns-mobile: 4;

    /* ---- Transitions ---- */
    --transition-speed: 0.2s;
    --transition-ease: ease;

    /* ---- Borders & Radius ---- */
    --border-radius: 10px;

    /* ---- Z-index layers ---- */
    --z-cursor: 9999;
    --z-header: 100;
    --z-modal: 1000;
}

/* Variables spécifiques mobile */
@media screen and (max-width: 768px) {
    :root {
        --font-size-base: 16px;
        --padding-page: 10px;
    }
}