/* ==========================================================================
   LuxBeautyV — design tokens
   Re-skinned Roja London cadence: ivory / gold / Baskerville.
   ========================================================================== */

:root {
  /* Color */
  --ivory:        #F6F3EC;
  --cream:        #FAF7F0;
  --gold:         #D4AF37;
  --gold-warm:    #C9A05B;
  --ink:          #111111;
  --ink-soft:     #2A2A2A;
  --rule:         rgba(17, 17, 17, 0.12);
  --rule-strong:  rgba(17, 17, 17, 0.2);
  --rule-gold:    rgba(212, 175, 55, 0.5);

  /* Type */
  --font-display: "Cormorant Garamond", "Libre Baskerville", Baskerville, Georgia, serif;
  --font-text:    "Libre Baskerville", Baskerville, Georgia, serif;

  /* Modular type scale (1.25 ratio) */
  --fs-eyebrow: 0.78rem;
  --fs-small:   0.875rem;
  --fs-body:    1.0625rem;
  --fs-lead:    1.25rem;
  --fs-h3:      1.625rem;
  --fs-h2:      2.25rem;
  --fs-h1:      clamp(2.5rem, 4vw + 1rem, 4.25rem);
  --fs-display: clamp(3rem, 6vw + 1rem, 5.75rem);

  /* Spacing */
  --container:    1320px;
  --gutter:       32px;
  --page-margin:  80px;
  --section-y:    120px;
  --headline-top: 48px;
  --headline-bot: 24px;
  --para-y:       18px;
  --grid-h:       40px;
  --grid-v:       48px;

  /* Motion */
  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:    180ms;
  --dur:         320ms;
  --dur-slow:    600ms;

  /* Letter spacing — modeled directly on Roja's eyebrow rhythm */
  --tracking-eyebrow: 0.18em;
  --tracking-button:  0.14em;
  --tracking-display: 0.005em;

  /* Z-index */
  --z-skip:        9999;
  --z-drawer:      1100;
  --z-overlay:     1050;
  --z-header:      1000;
  --z-announce:    1010;
}

@media (max-width: 1100px) {
  :root {
    --page-margin: 40px;
    --section-y:   96px;
  }
}

@media (max-width: 900px) {
  :root {
    --page-margin: 18px;
    --section-y:   64px;
    --gutter:      16px;
    --grid-h:      20px;
    --grid-v:      28px;
  }
}