/* =========================================================
   VAPORLUX — DESIGN TOKENS
   Direction artistique : apothicaire premium, lumineux,
   ivoire & botanique. À l'opposé radical du noir/néon.
   ========================================================= */

:root {
  /* ---------- COULEURS — Ivoire & papier ---------- */
  --c-bg-0:        #f3ece1;   /* fond le plus chaud (page footer) */
  --c-bg-1:        #f7f1e6;   /* fond principal */
  --c-bg-2:        #fbf6ec;   /* surfaces élevées */
  --c-bg-3:        #ffffff;   /* cards / hover */
  --c-bg-4:        #ffffff;   /* surfaces très hautes (boutons clairs) */
  --c-line:        rgba(40, 32, 20, 0.08);
  --c-line-strong: rgba(40, 32, 20, 0.16);

  --c-fg-0:        #1c1812;   /* presque noir, chaud */
  --c-fg-1:        #2c2620;   /* texte principal */
  --c-fg-2:        #6b6052;   /* texte secondaire */
  --c-fg-3:        #9a8f80;   /* texte tertiaire / placeholders */

  /* ---------- ACCENTS BOTANIQUES & TERRE ---------- */
  --c-lime:        #2f5d3a;   /* vert botanique profond (était néon lime) */
  --c-lime-soft:   rgba(47, 93, 58, 0.10);
  --c-cyan:        #c47744;   /* terracotta brûlée (était cyan) */
  --c-cyan-soft:   rgba(196, 119, 68, 0.10);
  --c-violet:      #b8924b;   /* or antique (était violet néon) */
  --c-violet-soft: rgba(184, 146, 75, 0.10);

  /* ---------- SÉMANTIQUE ---------- */
  --c-success:     #3a7a4a;
  --c-warning:     #c08418;
  --c-danger:      #b04a37;

  /* ---------- DÉGRADÉS (chauds) ---------- */
  --grad-neon:     linear-gradient(135deg, var(--c-lime) 0%, #4a7a55 100%);
  --grad-violet:   linear-gradient(135deg, var(--c-cyan) 0%, var(--c-violet) 100%);
  --grad-hero:     radial-gradient(ellipse at 30% 20%, rgba(196, 119, 68, 0.16), transparent 60%),
                   radial-gradient(ellipse at 80% 80%, rgba(184, 146, 75, 0.14), transparent 55%),
                   radial-gradient(ellipse at 50% 100%, rgba(47, 93, 58, 0.10), transparent 60%);

  /* ---------- TYPOGRAPHIE ---------- */
  --ff-display:    "Cormorant Garamond", "Space Grotesk", "Inter", system-ui, -apple-system, serif;
  --ff-body:       "Inter", system-ui, -apple-system, sans-serif;
  --ff-mono:       "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* échelle modulaire — ratio 1.25 (major third) */
  --fs-xs:    0.75rem;   /* 12 */
  --fs-sm:    0.875rem;  /* 14 */
  --fs-base:  1rem;      /* 16 */
  --fs-md:    1.125rem;  /* 18 */
  --fs-lg:    1.375rem;  /* 22 */
  --fs-xl:    1.75rem;   /* 28 */
  --fs-2xl:   2.25rem;   /* 36 */
  --fs-3xl:   3rem;      /* 48 */
  --fs-4xl:   4rem;      /* 64 */
  --fs-5xl:   5.5rem;    /* 88 */

  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.75;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mega:   0.18em;

  /* ---------- ESPACEMENTS — base 4px ---------- */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.5rem;
  --sp-6:   2rem;
  --sp-7:   3rem;
  --sp-8:   4rem;
  --sp-9:   6rem;
  --sp-10:  8rem;

  /* ---------- LAYOUT ---------- */
  --container:        1280px;
  --container-narrow: 960px;
  --container-wide:   1440px;
  --gutter:           clamp(1rem, 4vw, 2.5rem);

  /* ---------- RAYONS ---------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ---------- OMBRES (douces, chaleureuses, pas de néon) ---------- */
  --sh-sm:    0 2px 8px rgba(40, 32, 20, 0.06);
  --sh-md:    0 8px 24px rgba(40, 32, 20, 0.08);
  --sh-lg:    0 24px 60px rgba(40, 32, 20, 0.14);
  --sh-glow-lime:   0 12px 36px rgba(47, 93, 58, 0.20);
  --sh-glow-cyan:   0 12px 36px rgba(196, 119, 68, 0.20);
  --sh-glow-violet: 0 12px 36px rgba(184, 146, 75, 0.20);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --d-fast:   140ms;
  --d-base:   240ms;
  --d-slow:   420ms;
  --d-xslow:  720ms;

  /* ---------- Z-INDEX ---------- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  500;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;
}

/* Réduction du motion pour utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}