/* public/css/tokens.css
   Socle partagé boutique + admin boutique — chargé AVANT shop.css et
   style.css sur les pages qui l'incluent. Ne redéfinit jamais les
   variables déjà présentes dans style.css (chargé par TOUT le
   back-office existant, pas seulement les pages boutique) : les
   valeurs ci-dessous reprennent exactement celles de style.css pour la
   palette de base, afin qu'aucune page ne bouge sous elle. shop.css
   retire ses propres doublons légèrement différents pour se caler
   dessus (voir en tête de shop.css) ; style.css, lui, n'est pas touché,
   donc rien ne change sur le reste de l'admin (dashboard, commandes,
   clients...) qui n'a pas demandé cette refonte.

   Ajoute par-dessus : l'échelle typographique, les easings "ressort"
   façon Temu/Alibaba, et les animations jusqu'ici enfermées dans
   stock-admin.css (promues ici, disponibles partout où ce fichier est
   chargé, sans toucher stock-admin.css lui-même). */

:root {
  /* ── Couleurs — identiques à style.css:1-11, ne pas dévier ── */
  --teal-deep: #0D4D4A;
  --teal-mid: #1A7A72;
  --teal-light: #2BA89C;
  --gold: #F2C27A;
  --gold-dark: #D4A25A;
  --charcoal: #1C2B2A;
  --surface: #F7F9F8;
  --white: #FFFFFF;
  --text-muted: #4A6462;
  --border: #C8DEDD;

  /* ── Extensions sémantiques (shop.css en avait besoin, style.css non) ── */
  --ink: #1C2B2A;
  --surface-2: #EEF3F2;
  --border-strong: #B9D2D0;
  --green: #16A34A;
  --amber: #D97706;
  --red: #DC2626;
  --promo: #C2410C;

  /* ── Rayons & ombres ── */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --sh-1: 0 1px 3px rgba(16, 33, 31, 0.08);
  --sh-2: 0 4px 14px rgba(16, 33, 31, 0.10);
  --sh-3: 0 14px 40px rgba(16, 33, 31, 0.16);

  /* ── Échelle typographique (formalisée, jusqu'ici implicite/ad hoc) ── */
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 19px;
  --fs-xl: 24px;
  --fs-2xl: 32px;

  /* ── Easings "tactiles" — le ressenti Temu/Alibaba tient autant à la
     courbe qu'à la présence d'animation. --ease-spring dépasse
     légèrement sa cible avant de se stabiliser (overshoot), utilisé
     pour tout ce qui doit sembler "vivant" (popIn, bump, toggle). ── */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ══════════════ ANIMATIONS PARTAGÉES ══════════════
   Regroupe : ce qui existait déjà dans shop.css (fadeInUp, bump, popIn,
   checkPop, spin, shimmer) + ce qui n'existait jusqu'ici que dans
   stock-admin.css (kpiSlideIn, popValue, pulseGreen/Yellow/Red,
   modalSlideIn), désormais accessible à toute page chargeant ce
   fichier — boutique ET admin boutique. Toujours protégées par
   prefers-reduced-motion, au niveau global plutôt que dupliquées par
   composant. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 60% { transform: scale(0.92); } 100% { transform: scale(1); } }
  @keyframes popIn { from { opacity: 0; transform: scale(0.9) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
  @keyframes checkPop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
  @keyframes shimmer { to { background-position: -200% 0; } }

  /* Promues depuis stock-admin.css */
  @keyframes kpiSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes popValue { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }
  @keyframes pulseGreen { 0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.35); } 50% { box-shadow: 0 0 0 6px rgba(22,163,74,0); } }
  @keyframes pulseYellow { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,0.35); } 50% { box-shadow: 0 0 0 6px rgba(217,119,6,0); } }
  @keyframes pulseRed { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.35); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); } }
  @keyframes modalSlideIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

  /* Nouvelles — feuille mobile pour openPanel() (voir modal.css) */
  @keyframes sheetUpIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes sheetBackdropIn { from { opacity: 0; } to { opacity: 1; } }
}

@keyframes spin { to { transform: rotate(360deg); } }