/* ==========================================================================
   MYRIAGE — Design tokens (v3, issus de Claude Design)
   Source unique de vérité : couleurs, typographie, espacements, mouvement.
   Contrastes vérifiés au calcul (WCAG) : texte/fond 13,9:1, atténué/fond
   6,8:1, accent/fond 9,7:1, texte-sur-accent/accent 9,7:1. Couleurs de
   piste sur fond : vidéo 8,45:1, automatisation 8,64:1, SaaS 8,44:1 —
   et au moins 4,9:1 sur leurs fonds teintés (étapes à 20 %, puces à 14-16 %)
   posés sur le fond de page ou --c-surface ; 4,4:1 au pire sur --c-raised.
   ========================================================================== */

:root {
  /* --- Surfaces --------------------------------------------------------- */
  --c-bg:          #1F1C14;
  --c-bg-page:     #1A1813;   /* fond du body, un cran plus sombre que --c-bg */
  --c-surface:     #29251B;
  --c-raised:      #332E22;
  --c-line:        #474031;
  --c-line-strong: #6F6650;
  /* Mots non encore « lus » de la phrase-manifeste. La maquette proposait
     #5E5645, qui ne donne que 2,44:1 : illisible avant défilement. Celui-ci
     atteint 3,08:1, le seuil WCAG du grand texte (la phrase fait 24–52 px en
     gras), et reste nettement plus sombre que les mots allumés. */
  --c-dim:         #6E6552;

  /* --- Texte ------------------------------------------------------------ */
  --c-text:        #EFE8D6;
  --c-text-soft:   #D4CCB6;
  --c-text-muted:  #ADA488;

  /* --- Accent : jaune paille, pour les titres et les actions ------------ */
  --c-accent:       #DCC26A;
  --c-accent-hover: #E8D283;
  --c-on-accent:    #1F1C14;

  /* --- Couleurs de piste ------------------------------------------------
     Teintes reprises du logo (terracotta, sauge ; bleu grisé assorti),
     éclaircies pour garder le contraste du texte sur fond sombre. */
  --c-video: oklch(0.785 0.085 50); /* terracotta */
  --c-auto:  oklch(0.78 0.06 125);  /* sauge      */
  --c-saas:  oklch(0.775 0.055 235); /* bleu grisé */

  --c-error:      oklch(0.72 0.16 28);
  --c-error-text: oklch(0.8 0.13 28);
  --c-success:    var(--c-auto);

  /* Emplacement « à venir » : hachures discrètes */
  --c-placeholder: repeating-linear-gradient(135deg, #25211A 0 10px, #2C271E 10px 20px);

  /* --- Typographie ------------------------------------------------------ */
  --f-main: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --fs-body:  17px;
  --fs-small: 15px;
  --fs-label: 12px;
  --lh-body:  1.55;

  /* --- Espace (base 4) -------------------------------------------------- */
  --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-16: 64px;

  --s-section:   clamp(112px, 14vw, 224px);  /* espace entre deux sections   */
  --s-label-gap: clamp(40px, 6vw, 88px);     /* sous une ligne d'étiquettes  */
  --gutter:      clamp(20px, 4vw, 56px);
  --max:         1440px;

  /* --- Rayons ----------------------------------------------------------- */
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 12px; --r-pill: 999px;

  /* --- Mouvement -------------------------------------------------------- */
  --ease-zoom: cubic-bezier(.65, 0, .25, 1);
  --ease-out:  cubic-bezier(.2, .7, .2, 1);
  --ease-cut:  cubic-bezier(.7, 0, .3, 1);
  --t-zoom:    760ms;
  --t-curtain: 260ms;

  --header-h: 76px;
}