/* Down The Cove — Typography tokens
 * Headings: Sora (geometric sans, tight tracking). Body: Inter. Accent: Satisfy
 * (handwritten, used sparingly for warm captions like "family counter").
 */
:root {
  /* ── Fluid type scale ─────────────────────────────────────── */
  --text-hero: clamp(2.75rem, 6vw, 4.75rem);
  --text-h1: clamp(2.25rem, 4vw, 3.5rem);
  --text-h2: clamp(1.75rem, 3vw, 2.5rem);
  --text-h3: clamp(1.375rem, 2vw, 1.875rem);
  --text-h4: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-overline: 0.75rem;

  /* ── Line heights ─────────────────────────────────────────── */
  --leading-compact: 1.15;
  --leading-tight: 1.25;
  --leading-copy: 1.6;
  --leading-relaxed: 1.75;

  /* ── Letter spacing ───────────────────────────────────────── */
  --tracking-heading: -0.04em;  /* Sora headings */
  --tracking-tight: -0.05em;    /* large display */
  --tracking-normal: 0;
  --tracking-overline: 0.18em;  /* uppercase eyebrows */
  --tracking-wide: 0.08em;
}

/* ── Heading defaults (scope to .dtc to avoid leaking globally) ── */
.dtc-h1, .dtc-h2, .dtc-h3, .dtc-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight);
  color: var(--text-heading);
  margin: 0;
}
.dtc-hero { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-hero); letter-spacing: var(--tracking-tight); line-height: var(--leading-compact); color: var(--text-heading); margin: 0; }
.dtc-h1 { font-size: var(--text-h1); letter-spacing: var(--tracking-tight); }
.dtc-h2 { font-size: var(--text-h2); }
.dtc-h3 { font-size: var(--text-h3); }
.dtc-h4 { font-size: var(--text-h4); }

.dtc-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--ocean-mid);
}

.dtc-script {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
}

.dtc-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-copy);
  color: var(--text-body);
}