/* ==========================================================================
   CQR — TOKENS DE DESIGN
   Source unique de vérité. Dérivé de Meridian-Editorial-Carousel-DESIGN.md.
   Tout ajustement de charte se fait ICI, et nulle part ailleurs.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------
     1. COULEURS — socle (valeurs brutes de la charte)
     --------------------------------------------------------------- */
  --c-background:        #000000;   /* charte: background  */
  --c-primary:           #4B4BA0;   /* charte: primary     */
  --c-tertiary:          #8F47AE;   /* charte: tertiary    */
  --c-text:              #F4F4F5;   /* charte: text-primary */
  --c-text-hi:           #FFFFFF;   /* charte: text-secondary */

  /* ---------------------------------------------------------------
     2. COULEURS — dérivés texte, contrastés AA sur fond noir
        La charte donne primary/tertiary comme accents de SURFACE.
        Sur #000 ils mesurent 2,81:1 et 3,76:1 : inutilisables en texte.
        Ces deux teintes claires sont leur équivalent lisible.
     --------------------------------------------------------------- */
  --c-accent-text:       #7A7ACB;   /* 5,47:1 — liens, labels accentués      */
  --c-accent-text-hi:    #8F8FD8;   /* 7,09:1 — titres accentués, wordmark   */
  --c-muted:             #A1A1AA;   /* 8,19:1 — texte secondaire             */
  --c-faint:             #808089;   /* 5,37:1 — légendes, mentions           */

  /* ---------------------------------------------------------------
     3. SURFACES — matière verre
        La charte donne surface/border = #FFFFFF : ce sont des voiles
        alpha sur le noir, jamais du blanc plein.
     --------------------------------------------------------------- */
  --s-1:                 rgba(255,255,255,0.035);
  --s-2:                 rgba(255,255,255,0.060);
  --s-3:                 rgba(255,255,255,0.090);
  --b-1:                 rgba(255,255,255,0.10);
  --b-2:                 rgba(255,255,255,0.18);
  --b-3:                 rgba(255,255,255,0.28);
  --blur-sm:             12px;
  --blur-lg:             24px;

  /* halos d'accent */
  --glow-primary:        rgba(75, 75,160,0.30);
  --glow-tertiary:       rgba(143,71,174,0.22);

  /* trame de fond (gradient border shell de la charte) */
  --grid-line:           rgba(255,255,255,0.02);
  --grid-size:           32px;

  /* ---------------------------------------------------------------
     4. TYPOGRAPHIE — Montserrat, trois registres
     --------------------------------------------------------------- */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* display-lg : 128px fixe dans la charte → fluidifié mobile-first */
  --fs-display:          clamp(40px, 10.5vw, 128px);
  --lh-display:          1;
  --ls-display:          -0.025em;

  --fs-h2:               clamp(26px, 4.2vw, 52px);
  --lh-h2:               1.06;
  --ls-h2:               -0.022em;

  --fs-h3:               clamp(19px, 2.1vw, 26px);
  --lh-h3:               1.22;
  --ls-h3:               -0.012em;

  /* label-md de la charte, promu en corps de texte */
  --fs-body:             16px;
  --lh-body:             24px;
  --fs-body-lg:          18px;
  --lh-body-lg:          29px;

  /* body-md de la charte : c'est un eyebrow, pas un paragraphe.
     10,4px remonté à 11px pour la lisibilité, tracking conservé. */
  --fs-eyebrow:          11px;
  --lh-eyebrow:          16px;
  --ls-eyebrow:          0.2769em;

  --fs-small:            13px;
  --lh-small:            20px;
  --fs-micro:            11px;

  /* ---------------------------------------------------------------
     5. ESPACEMENT — rythme 4px strict
     --------------------------------------------------------------- */
  --sp-1:  4px;   --sp-2:  6px;   --sp-3:  8px;   --sp-4: 10px;
  --sp-5: 12px;   --sp-6: 16px;   --sp-7: 24px;   --sp-8: 32px;
  --sp-9: 48px;   --sp-10:64px;   --sp-11:96px;   --sp-12:128px;

  --gap:                 8px;
  --gap-lg:              12px;
  --card-padding:        10px;
  --card-padding-lg:     32px;
  --section-padding:     32px;
  --section-y:           clamp(56px, 9vw, 128px);

  --maxw:                1240px;
  --maxw-text:           68ch;

  /* ---------------------------------------------------------------
     6. FORMES
     --------------------------------------------------------------- */
  --r-md:                16px;
  --r-lg:                32px;
  --r-full:              9999px;

  /* ---------------------------------------------------------------
     7. PROFONDEUR
     --------------------------------------------------------------- */
  --shadow-drop:  0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-glass: inset 0 1px 0 0 rgba(255,255,255,0.35),
                  inset 0 -2px 6px 0 rgba(0,0,0,0.5),
                  0 8px 20px 0 rgba(0,0,0,0.5);
  --shadow-soft:  0 20px 25px -5px rgba(0,0,0,0.1),
                  0 8px 10px -6px rgba(0,0,0,0.1);

  /* ---------------------------------------------------------------
     8. MOUVEMENT — intensité modérée
     --------------------------------------------------------------- */
  --dur-1:               150ms;
  --dur-2:               300ms;
  --ease:                cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:            cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------------------------------------------------------------
     9. LOGO — pilotable depuis ici
     --------------------------------------------------------------- */
  --logo-word:           var(--c-accent-text-hi);   /* 7,09:1 */
  --logo-mark:           var(--c-accent-text);      /* 5,47:1 */
  --logo-mark-hi:        var(--c-tertiary);         /* point d'accent violet */

  /* ---------------------------------------------------------------
     10. CHAMP WEBGL
     --------------------------------------------------------------- */
  --field-opacity:       0.40;
  --field-spacing:       34px;   /* px entre deux points */
}