/* solenereboulet.com — design tokens (direction « Synthesis »)
   Source unique des valeurs visuelles. site.css et site.js ne lisent que ces variables.
   Documentation : docs/DESIGN.md · aperçu visuel : docs/design-system.html */

:root{
  /* ---------- Couleurs : surfaces ---------- */
  --bg:#FFF6EE;              /* fond de page, crème rosé */
  --bg-2:#FFEFE3;            /* bande contact, surface un cran plus chaude */

  /* ---------- Couleurs : encre ---------- */
  --ink:#22211D;             /* titres de liste, texte principal */
  --ink-2:rgba(34,33,29,.72);/* texte courant secondaire, ledes */
  --ink-3:#74726A;           /* méta, légendes, logos clients */
  --ink-soft:rgba(34,33,29,.55); /* traits de titre dans les schémas */

  /* ---------- Couleurs : accent ---------- */
  --orange:#FF4E28;          /* accent : titres (≥ 24 px), traits, cadres. 3,1:1 sur --bg, grand texte seulement */
  --orange-2:#C7320F;        /* accent lisible : petits textes, fond des boutons. 5:1 */
  --orange-3:#B52D0D;        /* bouton au survol */

  /* ---------- Couleurs : traits ---------- */
  --line:rgba(34,33,29,.1);        /* filets de liste, bordures discrètes */
  --line-strong:rgba(34,33,29,.2); /* contours des tuiles et pilules */
  --wire:#D3CBC4;                  /* pointillés des schémas : opaque pour ne pas foncer en se superposant */
  --skeleton:rgba(34,33,29,.1);    /* lignes fantômes (résultats concurrents) */
  --skeleton-strong:rgba(34,33,29,.16);

  /* ---------- Couleurs : données (pastilles, cocons, courbes) ----------
     Palette reprise de synthesis.partners. Réservée aux visualisations, jamais aux textes ni aux boutons. */
  --data-orange:#FF4E28;
  --data-tangerine:#FE7D14;
  --data-amber:#FFAB00;
  --data-lime:#D2CE46;
  --data-pink:#FE8989;
  --data-green:#6B9C3F;
  --data-blue:#779DC3;

  /* teintes du collage duotone (multiplicateur posé sur une photo en niveaux de gris) */
  --duo-peach:#FFB391;
  --duo-sage:#9CC5A6;
  --duo-sun:#FFC94D;

  /* ---------- Typographie ---------- */
  --font-serif:"Fraunces","Palatino Linotype",serif;          /* titres, wordmark, chiffres */
  --font-sans:"Public Sans",system-ui,sans-serif;            /* texte */
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;         /* navigation, boutons, étiquettes */
  --serif-axes:"SOFT" 100,"opsz" 72;                          /* Fraunces arrondi, optique « titre » */

  --fs-mega:clamp(96px,30vw,560px);   /* logotype géant du pied de page : remplit la largeur */
  --fs-display:clamp(36px,5.4vw,56px); /* h1 */
  --fs-h2:clamp(30px,3.6vw,44px);
  --fs-h2-xl:clamp(44px,7vw,88px);     /* « Parlons-en » */
  --fs-quote:clamp(28px,4vw,48px);
  --fs-wordmark:34px;
  --fs-metric:32px;                    /* chiffres des tuiles Search Console */
  --fs-h3:24px;
  --fs-title-sm:18px;                  /* titre de résultat de recherche */
  --fs-lede:18px;
  --fs-body:16px;
  --fs-small:15px;
  --fs-meta:14px;                      /* mono, dates, méta */
  --fs-caption:13px;
  --fs-micro:12px;

  --lh-display:1.08;
  --lh-heading:1.1;
  --lh-snug:1.25;
  --lh-body:1.5;

  --tracking-display:-.02em;
  --tracking-mega:-.04em;
  --tracking-mono:.01em;

  /* ---------- Espacement : grille de 4 px ---------- */
  --sp-4:4px;  --sp-8:8px;  --sp-12:12px; --sp-16:16px; --sp-20:20px;
  --sp-24:24px; --sp-28:28px; --sp-32:32px; --sp-40:40px; --sp-44:44px;
  --sp-48:48px; --sp-56:56px; --sp-64:64px; --sp-96:96px; --sp-120:120px;

  --gutter:clamp(20px,5vw,112px);       /* marge latérale de page */
  --section-y:clamp(56px,7vw,96px);     /* respiration verticale d'une section */
  --section-y-lg:clamp(72px,9vw,128px); /* section contact */
  --col-gap:clamp(32px,6vw,96px);       /* écart entre deux colonnes */
  --pad-panel:clamp(28px,4vw,56px);     /* intérieur des grands panneaux */

  /* ---------- Formes ---------- */
  --r-xs:3px;      /* barres de schéma, case à cocher */
  --r-sm:4px;      /* étiquettes */
  --r-md:8px;      /* cartes, cadres intérieurs, tuiles */
  --r-tile:10px;   /* icônes d'outils */
  --r-lg:12px;     /* barre de navigation mobile */
  --r-frame:20px;  /* cadre extérieur : --r-md + 12 px d'écart */
  --r-pill:999px;  /* boutons, recherche, étiquettes de cocon */

  --stroke:1px;    /* toutes les bordures de carte et de pilule */

  /* ---------- Profondeur ---------- */
  --shadow-float:0 8px 24px rgba(34,33,29,.06); /* seule ombre : la navigation flottante sur mobile */

  /* ---------- Mouvement ---------- */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-press:.12s;
  --dur-hover:.16s;
  --dur-state:.3s;
  --dur-move:.6s;
  --dur-reveal:.5s;    /* apparition d'un élément à l'arrivée à l'écran */
  --dur-draw:1.2s;     /* fil du déroulé qui se trace */
  --stagger:.07s;      /* décalage entre deux lignes d'une cascade */
  --stagger-step:.22s; /* décalage entre deux étapes du déroulé, calé sur le fil */
}