/**
 * Tokens CSS — Glazam Child Theme
 * Variables de design centralisées pour la charte graphique Glazam.
 * Pour adapter le thème, modifier uniquement ce fichier.
 * @version 1.0.0
 */

:root {

    /* ========================================
       COULEURS PRINCIPALES — Charte Glazam
       ======================================== */
    --color-primary:        #00C4CC;    /* Cyan — fond bouton principal, CTA */
    --color-primary-hover:  #00A8B5;    /* Cyan foncé — hover bouton */
    --color-navy:           #1C2279;    /* Bleu marine — titres H1/H2, texte fort */
    --color-navy-dark:      #0D1547;    /* Marine très foncé — hover liens, depths */
    --color-accent:         #1C2279;    /* Alias navy — utilisé pour les accents */
    --color-text:           #1A1A2E;    /* Texte principal body */
    --color-muted:          #6B7280;    /* Texte secondaire, labels, meta */
    --color-khaki:          #6B6B5A;    /* Gris-olive — neutrals, tags */
    --color-bg:             #FFFFFF;    /* Fond général */
    --color-bg-light:       #F0F0EC;    /* Fond clair (footer, sections alternées) */
    --color-border:         rgba(28, 34, 121, 0.10); /* Bordures subtiles */

    /* ========================================
       MENU MOBILE
       ======================================== */
    --color-menu-bg:        #0D1547;    /* Fond du panneau mobile */
    --color-menu-link:      #FFFFFF;    /* Liens dans le menu mobile */
    --color-menu-hover:     #00C4CC;    /* Hover liens menu mobile */

    /* ========================================
       HEADER
       ======================================== */
    --header-height:        80px;
    --header-z:             1000;
    --header-transition:    0.3s ease;
    --menu-panel-width:     380px;

    /* ========================================
       FOOTER
       ======================================== */
    --footer-padding-x:     60px;

    /* ========================================
       ANIMATIONS
       ======================================== */
    --anim-duration-fast:   0.4s;
    --anim-duration-base:   0.7s;
    --anim-duration-slow:   1s;
    --anim-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --anim-ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================
       DÉLAIS EN CASCADE
       ======================================== */
    --anim-delay-1: 0.1s;
    --anim-delay-2: 0.2s;
    --anim-delay-3: 0.3s;
    --anim-delay-4: 0.4s;
    --anim-delay-5: 0.5s;

    /* ========================================
       ESPACEMENTS
       ======================================== */
    --spacing-xs:   8px;
    --spacing-sm:   16px;
    --spacing-md:   24px;
    --spacing-lg:   48px;
    --spacing-xl:   80px;
    --spacing-2xl:  120px;

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-sm:    6px;
    --radius-md:    12px;
    --radius-pill:  100px;
}