/* =====================================================================
   SAMA-SAMA — TOKENS DE THÈME (v3 « street-food éditorial »)
   ---------------------------------------------------------------------
   ⚠️ COULEURS : palette officielle Blanc / Orange / Noir — NE PAS CHANGER.
   ✏️ POLICES : celles de la charte graphique sont en place (voir
      assets/css/fonts.css). Titres 1 = Impact (police système, appelée par
      la pile ci-dessous), texte et titres 2 = Montserrat (auto-hébergée).
   ===================================================================== */

:root {
  /* ---- Couleurs de marque (INCHANGÉES) ---- */
  --ink:          #17130f;   /* noir chaud (texte fort, fonds sombres)   */
  --ink-600:      #2a241d;
  --orange:       #f08a2c;   /* orange SAMA-SAMA                         */
  --orange-600:   #d9731c;   /* orange foncé (survol)                    */
  --orange-soft:  #fde9d6;   /* orange très clair (fonds)                */

  /* ---- Neutres ---- */
  --bg:           #ffffff;
  --paper:        #faf6f0;   /* fond crème des sections alternées        */
  --surface:      #ffffff;
  --line:         #efe7dd;
  --text:         #1f1a16;
  --muted:        #6f6962;
  --white:        #ffffff;

  /* ---- États ---- */
  --success:      #2e7d52;
  --error:        #c0392b;

  /* ---- Alias hérités (anciens noms encore utilisés par le JS/CSS) ---- */
  --color-primary: var(--ink);
  --color-primary-600: var(--ink-600);
  --color-accent: var(--orange);
  --color-accent-600: var(--orange-600);
  --color-accent-soft: var(--orange-soft);
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-alt: var(--paper);
  --color-border: var(--line);
  --color-text: var(--text);
  --color-text-muted: var(--muted);
  --color-text-invert: var(--white);
  --color-success: var(--success);
  --color-error: var(--error);

  /* ---- Typographie (charte graphique) ----
     Les trois polices sont auto-hébergées dans assets/fonts (voir fonts.css).
     --font-display : Impact = « TITRES 1 », la police du logo.
     --font-heading / --font-body : Montserrat = « TEXTE COURANT ET TITRES 2 ».
     --font-accent : Twister = « ANNOTATIONS » (manuscrite).
       ⛔ Le fichier fourni est inexploitable en l'état : aucun accent, et
       les chiffres 0 et 8 ne tracent rien. Volontairement appliqué nulle
       part. Détail et marche à suivre dans fonts.css. */
  --font-display: "Impact", Haettenschweiler, "Franklin Gothic Bold",
                  "Arial Narrow Bold", "Roboto Condensed", "Arial Narrow",
                  system-ui, sans-serif;
  --font-heading: "Montserrat", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-accent:  "Twister", "Montserrat", system-ui, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  clamp(2rem, 4.5vw, 2.8rem);
  --fs-3xl:  clamp(2.6rem, 7vw, 4.4rem);
  --fs-hero: clamp(3.2rem, 9vw, 6.5rem);

  /* ---- Rythme & rayons ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* ---- Style éditorial : bordures encre + ombres franches ---- */
  --edge: 2px solid var(--ink);
  --pop-shadow: 5px 5px 0 var(--ink);          /* ombre « sticker »       */
  --pop-shadow-sm: 3px 3px 0 var(--ink);
  --pop-shadow-orange: 5px 5px 0 var(--orange);
  --shadow-soft: 0 18px 44px -20px rgba(23, 19, 15, .28);

  --container: 1160px;
  --header-h: 72px;
  --transition: 180ms ease;
}