/* ===================================
   DESIGN TOKENS — SPACING
   ===================================
   Toutes les valeurs ici sont les valeurs MOBILE par défaut.
   Les ajustements desktop se font via @media dans chaque module.

   ---------------------------------------------------------------
   CONTRAT BREAKPOINTS (à respecter dans tous les modules)
   ---------------------------------------------------------------
   Stratégie : MOBILE-FIRST UNIQUEMENT.
   - Le code par défaut = mobile (< 768px)
   - Les overrides desktop vont dans :  @media (min-width: 768px)
   - Les @media doivent être REGROUPÉS en fin de module.

   Breakpoint principal autorisé :
       @media (min-width: 768px)        → tablette / desktop

   Breakpoint secondaire (rare, à justifier) :
       @media (min-width: 1024px)       → large desktop

   Cas spécial : viewer guitar-pro (600px) — toléré tant que documenté.

   INTERDIT :
   - @media (max-width: ...)            → on est mobile-first, on ne descend pas
   - @media (min-width: 769px)          → on harmonise à 768
   - Breakpoints exotiques (480, 600)  sauf justification dans le module
   =================================== */

:root {
    /* Spacing scale base */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-7: 1.75rem;    /* 28px */
    --space-8: 2rem;       /* 32px */

    /* Layout */
    --header-height: 64px;

    /* Taille du glyph d'icône (em, relatif au bouton parent) */
    --icon-size: 1.15em;          /* défaut, partout */
    --icon-size-lg: 1.6em;        /* variante mise en avant (ex. burger du menu) */

    /* Containers */
    --container-padding: var(--space-4);

    /* Border widths */
    --border-width: 1px;
    --border-width-thick: 3px;

    /* Borders */
    --radius-base: 0.4rem;
    --radius-1: 0.4rem;
    --radius-2: 0.5rem;
    --radius-3: 0.6rem;
    --radius-4: 0.7rem;
    --radius-pill: 9999px;
}