/* ══════════════════════════════════════════════════════════
   VIBE™ DESIGN TOKENS
   Colours are FROZEN — do not change any hex value.
   Need a new step? Use color-mix() from the existing tokens.
   Type scale uses fluid clamp() — 12px mobile floor on --t-micro.
   ══════════════════════════════════════════════════════════ */
:root {

  /* ── COLOURS ──────────────────────────────────────────── */
  --plum:        #432B33;
  --plum-dark:   #2e1b22;
  --plum-mid:    #573644;
  --bg:          #E3D6C9;
  --surface:     #D8CBBA;
  --neutral:     #B5A692;
  --gold:        #B89665;
  --gold-pale:   #D9C9A8;
  --gold-deep:   #8a6a3e;
  --sage:        #616151;
  --sage-pale:   #8c8c72;
  --ink:         #1c1210;
  --muted:       #7a6a5e;
  --border:      rgba(67, 43, 51, .09);
  --border-gold: rgba(184, 150, 101, .32);

  /* Derived — body copy colour (--muted on --bg is 3.42:1, fails AA body text).
     color-mix gives --ink at 70% opacity which yields 5.28:1 on --bg. See DESIGN.md. */
  --body-muted: color-mix(in srgb, var(--ink) 70%, transparent);
  /* Gold text on light surfaces (--gold-deep is 3.05–3.49:1; this is ≥4.6:1 on bg/surface/gold-pale). */
  --gold-ink: color-mix(in srgb, var(--gold-deep) 70%, var(--ink));
  /* Sage panels that carry text: --bg on --sage is only 4.41:1; on this it is 5.6:1. */
  --sage-deep: color-mix(in srgb, var(--sage) 80%, var(--ink));

  /* ── TYPE FAMILIES ───────────────────────────────────── */
  --f:  'Montserrat', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --fs: 'Cormorant Garamond', Georgia, serif;

  /* ── TYPE SCALE — fluid clamp(), 11px hard floor ─────── */
  --t-h1:    clamp(2.125rem, 1.4rem + 4vw, 4.75rem);       /* 34px → 76px */
  --t-h2:    clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);      /* 28px → 52px */
  --t-h3:    clamp(1.125rem, 1rem + 0.6vw, 1.5rem);        /* 18px → 24px */
  --t-price: clamp(0.9375rem, 0.9rem + 0.3vw, 1.125rem);   /* 15px → 18px */
  --t-body:  clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); /* 15px → 17px */
  --t-sm:    clamp(0.8125rem, 0.79rem + 0.15vw, 0.9375rem);/* 13px → 15px */
  --t-micro: clamp(0.6875rem, 0.67rem + 0.1vw, 0.75rem);   /* 11px → 12px */

  /* ── LETTER-SPACING (scales inversely with size) ─────── */
  --ls-h:     -0.02em;   /* Headlines */
  --ls-body:   0.02em;   /* Body text */
  --ls-ui:     0.14em;   /* Micro-labels, nav, chips */
  --ls-wide:   0.22em;   /* Section labels, eyebrows */

  /* ── LINE HEIGHT ─────────────────────────────────────── */
  --lh-head:   0.97;
  --lh-tight:  1.2;
  --lh-body:   1.75;
  --lh-body-d: 1.85;

  /* ── SPACING ─────────────────────────────────────────── */
  --space-xs:  clamp(0.5rem, 1vw, 0.75rem);
  --space-sm:  clamp(0.75rem, 2vw, 1.25rem);
  --space-md:  clamp(1.25rem, 3vw, 2rem);
  --space-lg:  clamp(2rem, 4vw, 3.5rem);
  --space-xl:  clamp(2.5rem, 5vw, 5.5rem);  /* section vertical padding */
  --gutter:    clamp(1.25rem, 4vw, 4rem);   /* section horizontal padding */

  /* ── LAYOUT ──────────────────────────────────────────── */
  --max-w:   1560px;
  --body-ch: 62ch;

  /* ── TRANSITIONS ─────────────────────────────────────── */
  --ease-std: 0.3s ease;
  --ease-in:  0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 767px) {
   :root { --t-micro: 0.75rem; }
}