/* ==========================================================================
   AFAAR — Design tokens
   Extraits littéralement de design-handoff/AFAAR Home.dc.html (piste 1a
   « Ambre atelier »). Aucune valeur inventée : chaque token ci-dessous
   apparaît tel quel dans le bundle.
   ========================================================================== */

:root {
  /* --- Couleurs : fonds sombres ------------------------------------------ */
  --c-ink:            #26251F; /* anthracite : bandeaux, carte formulaire, avis */
  --c-ink-deep:       #1C1B16; /* footer */
  --c-ink-card:       #332F27; /* cartes sur fond sombre, étapes 1-2-3 */
  --c-ink-dropzone:   #2C2921; /* fond zone de dépôt photos */
  --c-ink-rule:       #3d382e; /* filet au-dessus du marquee */
  --c-green-deep:     #2F3A2B; /* carte « Syndrome de Diogène » */

  /* --- Couleurs : fonds clairs ------------------------------------------- */
  --c-canvas:         #E5E1D8; /* <body> du bundle */
  --c-cream:          #F7F2E9; /* fond de page */
  --c-cream-deep:     #F1EADC; /* fin du dégradé hero + section « 4 étapes » */
  --c-card:           #FFFDF8; /* cartes sur fond clair */
  --c-border:         #E4DCCB; /* bordures cartes / header */

  /* --- Couleurs : accents ------------------------------------------------ */
  --c-amber:          #A85A16; /* accent principal, CTA, liens */
  --c-amber-dark:     #8A4B0F; /* hover CTA, eyebrows, fin dégradé CTA final */
  --c-amber-darker:   #7C3F0C; /* a:hover */
  --c-sand:           #D9A05B; /* chiffres, filets hauts, puces sur sombre */

  /* --- Couleurs : texte sur clair ---------------------------------------- */
  --c-text:           #26251F;
  --c-text-body:      #44403a; /* chapô hero */
  --c-text-muted:     #57534b; /* paragraphes secondaires, légendes */
  --c-placeholder:    #9a938a;

  /* --- Couleurs : texte sur sombre --------------------------------------- */
  --c-on-dark:        #F7F2E9;
  --c-on-dark-quote:  #EDE6D6; /* corps des avis */
  --c-on-dark-muted:  #CFC6B2; /* sous-titres, légendes stats */
  --c-on-dark-dim:    #B8AE9A; /* hints, footer */
  --c-on-dark-faint:  #8a8171; /* signatures avis, label marquee */
  --c-on-dark-line:   #6B6353; /* pointillés, mentions footer */
  --c-dot-idle:       #57503f; /* pastilles carrousel inactives */
  --c-cta-sub:        #F3E3CB; /* sous-titre CTA final */

  /* --- Couleurs : vignettes rayées (placeholder photos) ------------------- */
  --c-swatch-a:       #3d382e;
  --c-swatch-b:       #46402f;

  /* --- Typographie ------------------------------------------------------- */
  --font-display:     Anton, sans-serif;
  --font-body:        Archivo, sans-serif;
  --font-mono:        'IBM Plex Mono', monospace;

  /* --- Rayons ------------------------------------------------------------ */
  --r-xs:  4px;   /* badges AVANT/APRÈS, tag mono */
  --r-sm:  6px;   /* champs, CTA header, vignettes */
  --r-md:  8px;   /* boutons, cartes étapes */
  --r-lg:  10px;  /* zone de dépôt, cartes mobile */
  --r-xl:  12px;  /* cartes besoins, visuels avant/après */
  --r-2xl: 14px;  /* carte formulaire hero */

  /* --- Ombres ------------------------------------------------------------ */
  --sh-form:    0 20px 50px rgba(38, 37, 31, .35); /* carte formulaire hero */
  --sh-cta-m:   0 8px 24px rgba(138, 75, 15, .4);  /* CTA collant mobile */
  --sh-handle:  0 0 12px rgba(0, 0, 0, .4);        /* trait du curseur A/B */

  /* --- Gouttières -------------------------------------------------------- */
  --gutter:     56px; /* desktop */
  --gutter-m:   20px; /* mobile */
  --section-y:  80px; /* rythme vertical des sections desktop */
}