/* Devine Bébé — tokens du design system (thème « nursery »)  ── SOURCE UNIQUE ──
 * Servi à /tokens.css (statique Netlify), partagé par l'app (public/app) ET la landing.
 * Crème chaud · encre cacao · accent terracotta · arc-en-ciel bohème.
 * Toute couleur passe par un token nommé. */
:root {
  /* Couleurs */
  --color-paper:      #F4EFE7;  /* crème chaud */
  --color-paper-2:    #EDE2D8;  /* bande de section */
  --color-white:      #FFFFFF;
  --color-ink:        #3D2F28;  /* cacao */
  --color-ink-2:      #6E5A4E;  /* brun adouci (texte secondaire) */
  --color-ink-3:      #4A382F;  /* cacao profond (titres/contrastes app) */
  --color-rule:       #E2D7C9;  /* filet chaud */
  --color-rule-2:     #EBE2D6;
  --color-muted:      #75604F;  /* taupe (assombri pour 4.5:1 sur crème) */
  --color-muted-2:    #766152;  /* taupe (textes d'aide) — assombri pour AA 4.5:1 sur crème */
  --color-date:       #7E6A54;  /* taupe (dates secondaires) — assombri pour AA 4.5:1 sur crème */
  --color-accent:     #B05C44;  /* terracotta — accent unique */
  --color-accent-2:   #8E4733;  /* terracotta foncé (hover, liens) */
  --color-accent-tint:#F1E2DB;  /* terracotta très clair */
  --color-accent-ink: #F4EFE7;  /* texte sur accent */
  --color-focus:      #8E4733;
  --color-peach:      #D38E6F;
  --color-peach-soft: #F3E2DA;
  --color-success:    #2c8c42;  /* vert validation (fond bouton « envoyer ») */
  --color-success-2:  #2d6a34;  /* vert validation foncé (texte succès) */
  --color-success-tint:#F0FEF4; /* fond succès très clair */
  --color-error:      #A13030;  /* rouge erreur (texte) */
  --color-error-tint: #FEF4F4;  /* fond erreur très clair */
  --color-whatsapp:   #25D366;  /* marque WhatsApp (bouton partage) */
  --color-whatsapp-2: #1EBE5C;  /* WhatsApp hover */

  /* Nuances app héritées (surfaces/filets/encres) — tokenisées à l'identique */
  --color-paper-3:    #FBF3E9;  /* surface crème (cartes) */
  --color-paper-4:    #F4EAD9;  /* surface crème 2 */
  --color-rule-3:     #ECD9C4;  /* filet tan */
  --color-rule-4:     #E3CDBD;  /* filet tan 2 */
  --color-rule-5:     #F1E7DC;  /* filet crème */
  --color-ink-soft:   #5B4A3C;  /* brun texte adouci */
  --color-olive:      #6F7D63;  /* olive (fond) */
  --color-ink-strong: #20241F;  /* near-black (toasts) */

  /* Arc-en-ciel (motif décoratif : hero, pompons, sections) */
  --c-terracotta: #B05C44;
  --c-peach:      #D38E6F;
  --c-blush:      #E3B6A4;
  --c-mustard:    #D4A03F;
  --c-sage:       #9FB3A2;
  --c-sky:        #A6C5CB;

  /* Typo — 2 familles, c'est le plafond */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Source Serif 4', Georgia, serif;

  /* Échelle (ratio 1.25) */
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1.0625rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;
  --text-3xl:  3.052rem;
  --text-display-s: clamp(2.4rem, 4vw + 1rem, 4rem);
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);

  /* Espacement — base 4 pt */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* Mouvement */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* Filets, rayons, profondeur */
  --rule-hair: 1px;
  --radius-btn: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  /* Ombres chaudes en couches (teinte cacao) — profondeur premium */
  --shadow-whisper: 0 1px 2px oklch(30% 0.03 50 / 0.05);
  --shadow-sm: 0 1px 2px oklch(30% 0.03 50 / 0.06), 0 2px 5px oklch(30% 0.03 50 / 0.05);
  --shadow-md: 0 4px 10px oklch(30% 0.03 50 / 0.08), 0 10px 24px oklch(30% 0.03 50 / 0.06);
  --shadow-lg: 0 10px 28px oklch(30% 0.03 50 / 0.10), 0 22px 50px oklch(30% 0.03 50 / 0.08);
  --shadow-xl: 0 24px 60px oklch(30% 0.03 50 / 0.14);
  /* États d'interaction */
  --ring-focus: 0 0 0 3px oklch(58% 0.13 38 / 0.40);  /* anneau terracotta translucide */
  --lift-hover: -3px;

  /* Mise en page */
  --maxw: 68rem;
  --page-gutter: clamp(1rem, 4vw, 2rem);

  /* Z-index — échelle nommée */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ── Alias de compatibilité (LegalPage, Pricing) — anciens noms ── */
  --cream:      var(--color-paper);
  --cream-2:    var(--color-paper-2);
  --sage:       var(--color-accent);
  --sage-700:   var(--color-accent-2);
  --sage-100:   var(--color-accent-tint);
  --peach:      var(--color-peach);
  --peach-soft: var(--color-peach-soft);
  --ink:        var(--color-ink);
  --muted:      var(--color-muted);
  --border:     var(--color-rule);
  --white:      var(--color-white);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
}