/* ==========================================================================
   LDGLAM — Design tokens
   Langage : monochrome · rounded · flat (aucune ombre) · grille 4px
   Toute valeur de design vit ici. style.css ne fait que consommer.
   ========================================================================== */

:root {
  /* ---------- Couleur ----------------------------------------------------
     Pas de primaire chromatique : la hiérarchie tient au contraste de
     surface et à la typo. Le vert ne sert qu'aux états de succès.        */
  --c-bg:            #000000;
  --c-surface:       #000000;
  --c-elevated:      #141414;
  --c-elevated-2:    #1e1e1e;
  --c-text:          #ffffff;
  --c-muted:         #949494;
  --c-neutral-300:   #e3e1de;
  --c-accent:        #ffffff;
  --c-success:       #0ba954;
  --c-transparent:   #0000;

  /* Filets — dérivés, absents du brief source */
  --c-line:          rgba(255, 255, 255, 0.14);
  --c-line-strong:   rgba(255, 255, 255, 0.32);
  --c-overlay:       rgba(0, 0, 0, 0.72);

  /* ---------- Typographie ------------------------------------------------
     Switzer = substitut libre (Fontshare) au néo-grotesque du brief.
     Remplaçable par la vraie fonte : un seul point de changement.        */
  --font-sans: "Switzer", "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  --t-display:   clamp(3.5rem, 12vw, 9rem);      /* 56 → 144 */
  --t-h1:        clamp(2.75rem, 7.5vw, 4.3125rem); /* 44 → 69 */
  --t-h2:        clamp(2.25rem, 5.5vw, 4.3125rem); /* 36 → 69 */
  --t-h3:        clamp(1.75rem, 3vw, 2.25rem);   /* 28 → 36 */
  --t-h4:        1.3125rem;                      /* 21 */
  --t-body-lg:   1.3125rem;                      /* 21 */
  --t-body:      0.9375rem;                      /* 15 */
  --t-label:     0.75rem;                        /* 12 */

  --w-regular:   400;
  --w-medium:    500;
  --w-semi:      600;

  /* Interlignes — le brief donne 1 (mesure sur une seule ligne).
     On garde 1 pour l'affichage, 1.5 pour le texte courant : lisible. */
  --lh-display:  0.95;
  --lh-heading:  1.02;
  --lh-body:     1.5;

  --ls-display:  -0.02em;
  --ls-heading:  -0.01em;
  --ls-label:    0.14em;

  /* ---------- Espacement — grille 4px ------------------------------------ */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-19: 76px;
  --s-24: 96px;
  --s-30: 120px;

  --section-y:  clamp(76px, 10vw, 152px);
  --page-x:     clamp(20px, 5vw, 76px);
  --container:  1360px;
  --gutter:     10px;

  /* ---------- Rayons ----------------------------------------------------- */
  --r-pill:   86px;
  --r-card:   16px;
  --r-media:  20px;
  --r-input:   6px;

  /* ---------- Composants ------------------------------------------------- */
  --btn-pad-y:    14px;
  --btn-pad-x:    24px;
  --input-pad-y:   8px;
  --input-pad-x:  12px;
  --tap-min:      48px;   /* garde-fou tactile, hors brief */
  --nav-h:        76px;

  /* ---------- Mouvement --------------------------------------------------- */
  --d-fast:  0.3s;
  --d-slow:  0.4s;
  --ease:    cubic-bezier(0.22, 0.61, 0.22, 1);

  /* ---------- Élévation --------------------------------------------------- */
  /* Design flat : aucune ombre. La profondeur passe par --c-elevated. */
  --shadow: none;

  /* ---------- Empilement -------------------------------------------------- */
  --z-element: 99;
  --z-nav:   1001;

  /* ---------- Focus -------------------------------------------------------
     Le brief source annonce 0px. On dévie volontairement : sans anneau
     visible, le site est inutilisable au clavier. Visible au clavier
     seulement (:focus-visible), donc invisible à la souris.             */
  --focus-w:      2px;
  --focus-offset: 2px;
  --focus-color:  var(--c-text);
}