/*
 * typography.css — Type scale, font loading, heading defaults
 * Fonts: Playfair Display (display), Inter (body/UI)
 * Values locked from: Homepage (01-homepage-approved.png)
 */

/* ─────────────────────────────────────────────────
   HEADING DEFAULTS
   All headings use Playfair Display.
───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.wp-block-kadence-advancedheading {
  font-family: var(--hs-font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--hs-graphite);
  margin-top: 0;
}

h1 { font-size: var(--hs-text-88); }
h2 { font-size: var(--hs-text-52); }
h3 { font-size: var(--hs-text-24); }
h4 { font-size: var(--hs-text-15); font-weight: 600; letter-spacing: 0; }

/* On dark backgrounds — override to white */
.hs-dark h1,
.hs-dark h2,
.hs-dark h3,
.hs-dark h4 {
  color: var(--hs-white);
}

/* ─────────────────────────────────────────────────
   DISPLAY VARIANTS
───────────────────────────────────────────────── */
.hs-display {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-88);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--hs-white);
}

.hs-section-heading {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-52);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--hs-graphite);
}

/* ─────────────────────────────────────────────────
   BODY TEXT
───────────────────────────────────────────────── */
body,
p,
.hs-body {
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-13);
  line-height: 1.7;
  color: var(--hs-graphite);
}

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

/* ─────────────────────────────────────────────────
   EDITORIAL / CALLOUT TEXT
───────────────────────────────────────────────── */
.hs-callout-text {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-24);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--hs-white);
}

/* ─────────────────────────────────────────────────
   LABELS & METADATA
───────────────────────────────────────────────── */
.hs-meta,
.hs-eyebrow {
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-10);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
}

.hs-price {
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-13);
  font-weight: 400;
  color: var(--hs-graphite);
}

.hs-object-name {
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-13);
  font-weight: 500;
  color: var(--hs-graphite);
  line-height: 1.3;
}

/* ─────────────────────────────────────────────────
   RESPONSIVE TYPE SCALING
───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  h1, .hs-display { font-size: 64px; }
  h2, .hs-section-heading { font-size: 40px; }
}

@media (max-width: 768px) {
  h1, .hs-display { font-size: 44px; }
  h2, .hs-section-heading { font-size: 32px; }
  h3 { font-size: 20px; }
}

@media (max-width: 480px) {
  h1, .hs-display { font-size: 36px; }
}