/* ==========================================================================
   SUNSHINE AESTHETIC CLINIC — TYPOGRAPHY
   A serif that seduces, a sans that reassures.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Jost:wght@300;400;500&display=swap');

body {
  font-family: var(--font-body);
  font-weight: var(--text-body-weight-light);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text-primary);
  font-variant-numeric: var(--numeral-variant);
}

/* -----------------------------------------------------------------------
   H1 — Display. Cormorant Garamond Medium, 34–48pt.
   Sentence case only. One italic (tan) word max per headline.
   ----------------------------------------------------------------------- */
.h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--text-h1-weight);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  color: var(--color-text-primary);
  text-transform: none; /* sentence case only */
}

.h1 em, h1 em,
.h1 .accent-word, h1 .accent-word {
  font-style: italic;
  color: var(--color-champagne-tan-deep); /* the one emotional word */
  font-weight: var(--text-h1-weight);
}

/* On mint or dark backgrounds, H1 may run in cream */
.on-signature .h1, .on-dark .h1 {
  color: var(--color-butter-cream);
}

/* -----------------------------------------------------------------------
   H2 — Section. Cormorant Garamond SemiBold, 18–24pt.
   ----------------------------------------------------------------------- */
.h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--text-h2-weight);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  color: var(--color-text-primary);
}

/* -----------------------------------------------------------------------
   Label / CTA — Jost Medium, uppercase, +2.5pt tracking (buttons/CTAs)
   Subhead variant uses +8% tracking (section labels, nav, menu categories)
   ----------------------------------------------------------------------- */
.label, .eyebrow {
  font-family: var(--font-body);
  font-weight: var(--text-label-weight);
  font-size: var(--text-label-size);
  text-transform: var(--text-label-transform);
  letter-spacing: var(--text-label-tracking);
  color: var(--color-text-primary);
}

.cta-text {
  font-family: var(--font-body);
  font-weight: var(--text-label-weight);
  font-size: var(--text-label-size);
  text-transform: var(--text-label-transform);
  letter-spacing: var(--text-cta-tracking);
}

/* -----------------------------------------------------------------------
   Body copy — Jost Light/Regular, 9–11pt, 1.6 leading
   ----------------------------------------------------------------------- */
.body-text, p {
  font-family: var(--font-body);
  font-weight: var(--text-body-weight-light);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text-primary);
}

.body-text--regular {
  font-weight: var(--text-body-weight-regular);
}

.body-text--muted {
  color: var(--color-text-muted);
}

/* Numerals — pricing, durations. Always lining, never oldstyle. */
.numeral {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* -----------------------------------------------------------------------
   Script — reserved. Do not implement in code; lives in the logo only.
   ----------------------------------------------------------------------- */