/* ==========================================================================
   Dermomask Paris — jetons de design
   Les fichiers sont chargés par ordre alphabétique via stylesheet_link_tag :app
   ========================================================================== */

:root {
  /* --- Couleurs ---------------------------------------------------------- */
  --ink:          #0c0c0d;   /* noir de marque */
  --ink-800:      #191919;
  --ink-600:      #3a3a3c;
  --ink-400:      #6f6f74;
  --ink-200:      #a8a6a2;

  --ivory:        #faf7f2;   /* fond de page, blanc chaud */
  --sand:         #f1ebe1;   /* aplat secondaire */
  --sand-deep:    #e4d9c9;
  --champagne:    #a98f72;   /* accent, à doser */
  --champagne-lt: #c9b299;

  --paper:        #ffffff;
  --line:         color-mix(in srgb, var(--ink) 12%, transparent);
  --line-strong:  color-mix(in srgb, var(--ink) 24%, transparent);
  --line-invert:  color-mix(in srgb, #fff 16%, transparent);

  --surface:      var(--ivory);
  --on-surface:   var(--ink);

  /* --- Typographie ------------------------------------------------------- */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-serif:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.18vw, 1.05rem);
  --step-1:  clamp(1.10rem, 1.02rem + 0.38vw, 1.32rem);
  --step-2:  clamp(1.35rem, 1.18rem + 0.80vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.40rem + 1.60vw, 2.75rem);
  --step-4:  clamp(2.20rem, 1.55rem + 2.90vw, 4.10rem);
  --step-5:  clamp(2.70rem, 1.60rem + 4.90vw, 6.20rem);

  --leading-tight: 1.06;
  --leading-snug:  1.22;
  --leading-body:  1.68;

  --tracking-label: 0.22em;
  --tracking-wide:  0.06em;

  /* --- Rythme ------------------------------------------------------------ */
  --gutter:     clamp(1.25rem, 0.85rem + 2vw, 2.75rem);
  --container:  78rem;
  --container-narrow: 46rem;
  --section-y:  clamp(4.5rem, 3rem + 7vw, 9.5rem);

  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Ombres & mouvement ------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgb(12 12 13 / 0.04), 0 4px 14px rgb(12 12 13 / 0.05);
  --shadow:    0 2px 6px rgb(12 12 13 / 0.05), 0 18px 44px rgb(12 12 13 / 0.10);
  --shadow-lg: 0 8px 20px rgb(12 12 13 / 0.09), 0 40px 90px rgb(12 12 13 / 0.18);

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur:       0.45s;
  --dur-fast:  0.22s;

  --header-h: 76px;
}

@media (max-width: 47.99em) {
  :root { --header-h: 64px; }
}