/* =============================================================
   JOUDY BEAUTY SPA — Design Tokens
   Source de vérité — ne pas modifier les valeurs directement
   dans les widgets Elementor.
   ============================================================= */

:root {

  /* ── Couleurs marque ── */
  --color-ivory:     #FAF6F0;
  --color-cream:     #F3EBE0;
  --color-sand:      #E7DACB;
  --color-taupe:     #C7B4A0;
  --color-mocha:     #8C7460;
  --color-walnut:    #4A382B;
  --color-espresso:  #2A2019;
  --color-ink:       #191310;

  --color-champagne: #D8BE93;
  --color-gold:      #B4915C;
  --color-bronze:    #8F6E42;
  --color-blush:     #EBD4CC;
  --color-rose:      #C99A8E;

  /* ── Couleurs sémantiques ── */
  --color-primary:      var(--color-espresso);
  --color-on-primary:   var(--color-ivory);
  --color-accent:       var(--color-champagne);
  --color-on-accent:    var(--color-espresso);
  --color-bg:           var(--color-ivory);
  --color-surface:      var(--color-cream);
  --color-text:         var(--color-espresso);
  --color-text-muted:   var(--color-mocha);
  --color-border:       var(--color-sand);

  --link:               var(--color-bronze);
  --link-hover:         var(--color-gold);

  /* ── Typographie ── */
  --font-heading: 'Merienda', Georgia, serif;
  --font-display: 'Merienda', Georgia, serif;
  --font-body:    'Roboto', Arial, sans-serif;
  --font-sans:    'Roboto', Arial, sans-serif;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.563rem;  /* 25px */
  --text-2xl:  1.953rem;  /* 31px */
  --text-3xl:  2.441rem;  /* 39px */
  --text-4xl:  3.052rem;  /* 61px — ratio 1.25 */

  --tracking-wider: 0.14em;

  /* ── Espacement (base 4px) ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* ── Formes ── */
  --radius:      4px;
  --radius-pill: 999px;

  /* ── Ombres (aucune) ── */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* ── Mouvement ── */
  --dur-instant: 90ms;
  --dur-quick:   180ms;
  --dur-smooth:  320ms;
  --dur-slow:    560ms;
  --dur-languid: 900ms;

  --ease-silk:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-glide:    cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-soft:  cubic-bezier(0.7, 0, 0.84, 0);

  --transition-color:     color var(--dur-quick) var(--ease-silk),
                          background-color var(--dur-quick) var(--ease-silk),
                          border-color var(--dur-quick) var(--ease-silk);
  --transition-transform: transform var(--dur-smooth) var(--ease-silk);
  --transition-lift:      transform var(--dur-smooth) var(--ease-spring),
                          box-shadow var(--dur-smooth) var(--ease-silk);
  --transition-fade:      opacity var(--dur-smooth) var(--ease-silk);
  --transition-all:       all var(--dur-smooth) var(--ease-silk);

  --lift-hover: -6px;
}

/* ── Keyframes signature ── */
@keyframes jbs-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes jbs-blur-in {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes jbs-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes jbs-breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.03); }
}
@keyframes jbs-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes jbs-shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

--anim-fade-up: jbs-fade-up var(--dur-slow) var(--ease-out-soft) both;
--anim-blur-in: jbs-blur-in var(--dur-slow) var(--ease-silk) both;
--anim-reveal:  jbs-reveal var(--dur-languid) var(--ease-silk) both;
--anim-breathe: jbs-breathe 4s var(--ease-glide) infinite;
--anim-float:   jbs-float 3s var(--ease-glide) infinite;
--anim-shimmer: jbs-shimmer 2.4s linear infinite;

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}