/* ============================================================
   AYURVIKA — TYPOGRAPHY
   Display: Cormorant Garamond (elegant high-contrast serif, echoes the
            wordmark). Set LARGE so even mid weights dominate.
   UI/Body: Mulish (warm humanist sans).
   Eyebrows: Mulish, uppercase, wide tracking — the "premium label" voice.
   ============================================================ */
:root {
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    var(--font-sans);

  /* ---- Display scale (serif) ---- */
  --fs-display-1: clamp(3.5rem, 7vw, 6.5rem);   /* @kind font */
  --fs-display-2: clamp(2.75rem, 5vw, 4.5rem);  /* @kind font */
  --fs-display-3: clamp(2rem, 3.4vw, 3rem);     /* @kind font */
  --fs-h1:        clamp(2rem, 3vw, 2.75rem);    /* @kind font */
  --fs-h2:        clamp(1.6rem, 2.2vw, 2.1rem); /* @kind font */
  --fs-h3:        1.5rem;                        /* @kind font */

  /* ---- Body / UI scale (sans) ---- */
  --fs-lead:      clamp(1.125rem, 1.4vw, 1.375rem); /* @kind font */
  --fs-body:      1.0625rem;   /* @kind font */
  --fs-body-sm:   0.9375rem;   /* @kind font */
  --fs-caption:   0.8125rem;   /* @kind font */
  --fs-eyebrow:   0.75rem;     /* @kind font */

  /* ---- Weights ---- */
  --fw-display:   600;   /* @kind font */
  --fw-display-md:500;   /* @kind font */
  --fw-regular:   400;   /* @kind font */
  --fw-medium:    500;   /* @kind font */
  --fw-semibold:  600;   /* @kind font */
  --fw-bold:      700;   /* @kind font */
  --fw-black:     800;   /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight:     1.05;  /* @kind other */
  --lh-snug:      1.2;   /* @kind other */
  --lh-body:      1.65;  /* @kind other */
  --lh-relaxed:   1.8;   /* @kind other */

  /* ---- Tracking ---- */
  --ls-display:  -0.01em; /* @kind other */
  --ls-tight:    -0.02em; /* @kind other */
  --ls-normal:   0;       /* @kind other */
  --ls-eyebrow:  0.22em;  /* @kind other */
  --ls-wide:     0.08em;  /* @kind other */
}

/* ---- Optional utility classes (components mostly inline these) ---- */
.ayv-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-strong);
}
.ayv-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}