/* =====================================================================
   LE JARDIN D'ELIO — variables.css
   Charte graphique officielle, dérivée fidèlement de la planche
   d'illustrations (logo, mascotte Ti-Pouss, motifs Arts & Crafts).
   ===================================================================== */

:root {
  /* ---- Couleurs de la charte (échantillonnées sur les illustrations) ---- */
  --c-cream:        #F9EEDA; /* fond principal — crème des illustrations   */
  --c-cream-soft:   #FBF4E4; /* crème clair, cartes                        */
  --c-panel:        #F2E6C7; /* crème profond, bandeaux                    */
  --c-panel-warm:   #F6E9CE;

  --c-forest:       #1E4B2A; /* vert forêt le plus foncé — titres, texte   */
  --c-leaf:         #2F7D3A; /* vert feuille — couleur primaire            */
  --c-leaf-soft:    #4E9A46; /* vert feuille clair                         */
  --c-lime:         #8AAE2E; /* vert Ti-Pouss / olive — accents mesurés    */

  --c-gold:         #F2A41C; /* or « Elio » / soleil — accent chaud        */
  --c-gold-soft:    #F7C64E;
  --c-coral:        #D9482B; /* rouge hibiscus — accent d'appel            */
  --c-coral-soft:   #E8674A;
  --c-teal:         #2FA396; /* bleu lagon — touches d'eau                 */
  --c-terracotta:   #C56A28; /* terre cuite du pot                         */

  --c-ink:          #24331F; /* texte courant, chaud                       */
  --c-ink-soft:     #4A5A3F;

  /* ---- Rôles sémantiques ---- */
  --bg:             var(--c-cream);
  --bg-alt:         var(--c-panel);
  --surface:        var(--c-cream-soft);
  --text:           var(--c-ink);
  --text-muted:     var(--c-ink-soft);
  --heading:        var(--c-forest);
  --primary:        var(--c-leaf);
  --accent:         var(--c-gold);
  --accent-2:       var(--c-coral);

  --line:           rgba(30, 75, 42, .16);  /* filets botaniques discrets  */
  --line-strong:    rgba(30, 75, 42, .32);

  /* ---- Typographie ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fw-body:   400;
  --fw-medium: 600;
  --fw-bold:   700;
  --fw-black:  800;

  /* Échelle typographique fluide */
  --step--1: clamp(.82rem, .8rem + .1vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.08rem + .5vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 2.8rem);
  --step-4:  clamp(2.4rem, 1.8rem + 3.4vw, 4rem);
  --step-hero: clamp(3rem, 2rem + 6vw, 6rem);

  /* ---- Espacement & rythme ---- */
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs:  .75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  --container:   1200px;
  --container-narrow: 760px;

  /* ---- Formes (rondeur « Toyism ») ---- */
  --r-xs: 8px;
  --r-s:  14px;
  --r-m:  20px;
  --r-l:  28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ---- Ombres douces & chaudes ---- */
  --shadow-s:  0 2px 8px rgba(60, 40, 10, .07);
  --shadow-m:  0 10px 30px rgba(60, 40, 10, .10);
  --shadow-l:  0 24px 60px rgba(46, 60, 20, .16);
  --ring:      0 0 0 3px rgba(242, 164, 28, .55);

  /* ---- Transitions ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .18s var(--ease);
  --t:      .32s var(--ease);
  --t-slow: .6s  var(--ease);
}