/* ============================================================
   DOMAINE BÉTHANIA — DESIGN SYSTEM · « LES ESSENCES »
   Tokens : palette forestière + bois de cœur, typographie,
   échelle modulaire, profondeur, mouvement.
   ============================================================ */

:root {
  /* ---- PALETTE : la canopée & le bois de cœur ---------------- */
  --canopy:        #0F1A14; /* vert-noir : sous-bois à la tombée du jour */
  --canopy-800:    #14231B; /* strates profondes */
  --canopy-700:    #1B2D22; /* cartes sur fond sombre */
  --bark:          #211914; /* écorce, contraste chaud */

  --parchment:     #F4EEE1; /* parchemin : sections claires */
  --parchment-200: #EAE1CE; /* parchemin ombré */
  --linen:         #FBF8F0; /* lin, surfaces les plus claires */

  --heartwood:     #B9793B; /* bois de cœur ambré — accent principal */
  --heartwood-lit: #D2934F; /* padouk éclairé — hover / lueur */
  --heartwood-deep:#8A5628; /* acajou profond */

  --foliage:       #4E6A4F; /* feuillage — accent secondaire */
  --foliage-lit:   #6E8B68; /* feuillage sous la lumière */

  --sand:          #C9B79A; /* sable clair, notes chaudes */
  --ink:           #14100B; /* texte sur clair */

  /* ---- RÔLES SÉMANTIQUES ------------------------------------ */
  --bg:            var(--canopy);
  --bg-alt:        var(--canopy-800);
  --surface:       var(--canopy-700);
  --on-dark:       #EFE8DA; /* texte principal sur sombre */
  --on-dark-soft:  #B9B0A0; /* texte secondaire sur sombre */
  --on-light:      var(--ink);
  --on-light-soft: #5C5346;
  --accent:        var(--heartwood);
  --accent-lit:    var(--heartwood-lit);
  --line:          rgba(239,232,218,.14); /* filets sur sombre */
  --line-dark:     rgba(20,16,11,.14);    /* filets sur clair */

  /* ---- ESSENCES : la couleur de chaque bois ----------------- */
  --wood-acajou:   #8C4A2F;
  --wood-bosse:    #9E7B4F;
  --wood-doussie:  #7C5A32;
  --wood-ebene:    #2B2622;
  --wood-iroko:    #A8823F;
  --wood-padouk:   #A5432B;
  --wood-tali:     #6E4A2C;
  --wood-oasis:    #4E6A4F;

  /* ---- TYPOGRAPHIE ------------------------------------------ */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;

  /* échelle modulaire fluide (clamp) — ratio ~1.28 */
  --step--1: clamp(.78rem, .74rem + .18vw, .88rem);
  --step-0:  clamp(.95rem, .9rem + .25vw, 1.05rem);
  --step-1:  clamp(1.18rem, 1.05rem + .5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.28rem + .95vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.55rem + 1.7vw, 3.1rem);
  --step-4:  clamp(2.5rem, 1.8rem + 3vw, 4.6rem);
  --step-5:  clamp(3.1rem, 1.9rem + 5.2vw, 7rem);
  --step-6:  clamp(3.6rem, 1.7rem + 8vw, 10rem);

  /* ---- ESPACEMENT ------------------------------------------- */
  --space-2xs: .5rem;
  --space-xs:  .875rem;
  --space-s:   1.25rem;
  --space-m:   2rem;
  --space-l:   3.5rem;
  --space-xl:  5.5rem;
  --space-2xl: 8rem;
  --space-3xl: 11rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw:   1360px;
  --maxw-narrow: 820px;

  /* ---- FORMES & PROFONDEUR ---------------------------------- */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 24px 60px -28px rgba(0,0,0,.55);
  --shadow-lift: 0 40px 90px -40px rgba(0,0,0,.7);

  /* ---- MOUVEMENT -------------------------------------------- */
  --ease-out:  cubic-bezier(.2, .7, .2, 1);
  --ease-inout: cubic-bezier(.75, 0, .18, 1);
  --dur-fast:  .35s;
  --dur:       .6s;
  --dur-slow:  1.1s;

  --z-nav: 100;
  --z-cursor: 9999;
  --z-overlay: 200;
}

/* respect du mode réduit */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .01ms; --dur: .01ms; --dur-slow: .01ms; }
}