/* ============================================================
   BEAUTY & BODY BY SIFRA — DESIGN TOKENS
   Source of truth. Mapped 1:1 from BYSIFRA-BUILD-SPEC.md.
   These become WordPress theme.json / GeneratePress globals later.
   ============================================================ */

:root {
  /* ---- Colours (exact, from approved mockups) ---- */
  --ivory:       #FBF6EF;   /* page background */
  --porcelain:   #F5ECE0;   /* hero / section backgrounds */
  --sand:        #EBDCC8;   /* secondary backgrounds */
  --champagne:   #D9B98C;   /* accent, borders */
  --gold:        #C39A5E;   /* primary brand — buttons, highlights */
  --gold-dark:   #8F6A3C;   /* dark gold — text accents */
  --gold-light:  #E2C492;   /* light gold — gradients */
  --espresso:    #2A1F15;   /* primary text, dark backgrounds */
  --night:       #1B130B;   /* darkest — nav/footer/signature sections */
  --ink:         #4E4234;   /* body text */
  --blush:       #EFD0BC;   /* subtle warm accent */
  --rose:        #D9A183;   /* secondary warm accent */
  --logo-bg:     #E3CFC2;   /* exact logo background match */

  /* ---- Derived / functional ---- */
  --gold-gradient:      linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
  --gold-gradient-soft: linear-gradient(135deg, #F0DFC0 0%, var(--gold-light) 100%);
  --line:               rgba(143, 106, 60, 0.22);   /* hairline borders */
  --line-light:         rgba(255, 255, 255, 0.16);
  --overlay-dark:       rgba(27, 19, 11, 0.55);

  /* ---- Typography ---- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-eyebrow:  clamp(0.70rem, 0.66rem + 0.2vw, 0.80rem);
  --fs-body:     clamp(0.98rem, 0.95rem + 0.2vw, 1.075rem);
  --fs-lead:     clamp(1.10rem, 1.02rem + 0.5vw, 1.30rem);
  --fs-h5:       clamp(1.05rem, 1.00rem + 0.4vw, 1.30rem);
  --fs-h4:       clamp(1.35rem, 1.20rem + 0.8vw, 1.85rem);
  --fs-h3:       clamp(1.80rem, 1.50rem + 1.5vw, 2.75rem);
  --fs-h2:       clamp(2.30rem, 1.80rem + 2.6vw, 3.75rem);
  --fs-h1:       clamp(2.80rem, 2.10rem + 3.6vw, 5.00rem);
  --fs-display:  clamp(3.40rem, 2.20rem + 6vw, 7.00rem);

  /* Tracking (letter-spacing) — from spec */
  --track-label: 0.34em;   /* labels / eyebrows: 0.3–0.4em */
  --track-nav:   0.20em;   /* nav: 0.2em */
  --track-tight: 0.02em;

  --leading-tight: 1.06;
  --leading-snug:  1.25;
  --leading-body:  1.62;

  /* ---- Spacing scale ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;
  --space-8: 9rem;

  --section-y: clamp(4rem, 3rem + 6vw, 8.5rem);   /* vertical section rhythm */
  --gutter:    clamp(1.25rem, 0.8rem + 3vw, 3rem); /* page side padding */
  --maxw:      1240px;                              /* content max width */
  --maxw-narrow: 820px;

  /* ---- Shape language (capsule / arch echoing the logo) ---- */
  --radius-capsule: 999px;
  --radius-arch:    50% 50% 14px 14px / 42% 42% 14px 14px; /* arch top, soft base */
  --radius-card:    18px;
  --radius-soft:    12px;

  /* ---- Elevation ---- */
  --shadow-sm:  0 2px 10px rgba(42, 31, 21, 0.06);
  --shadow-md:  0 14px 40px rgba(42, 31, 21, 0.10);
  --shadow-lg:  0 30px 80px rgba(42, 31, 21, 0.16);
  --shadow-gold: 0 12px 30px rgba(143, 106, 60, 0.28);

  /* ---- Motion ---- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   0.25s;
  --dur:        0.5s;
  --dur-slow:   0.9s;

  /* ---- Layout chrome ---- */
  --nav-h: 84px;
  --z-nav: 100;
  --z-float: 90;
  --z-modal: 200;
}