/* ============================================================
   SYSTEMIC CHANGE LABS TYPOGRAPHY SYSTEM Playfair Display (headings) + Inter (body)
   Load after design-tokens.css, before styles.css
   ============================================================ */

/* ── Font imports ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,800&family=Inter:wght@400;500;600;700&display=swap');

/* ── Base ── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: var(--text-base); line-height: 1.7; color: var(--body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}

/* ── Headings ── */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; margin-top: 0;
}

h1 {
  font-size: var(--text-6xl); font-weight: 800; line-height: 1.02; margin-bottom: var(--space-6);
}

h2 {
  font-size: var(--text-5xl); font-weight: 800; line-height: 1.05; margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--text-2xl); font-weight: 700; line-height: 1.15; margin-bottom: var(--space-3);
}

h4 {
  font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-2);
}

/* ── Body text ── */
p {
  margin-top: 0; margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* ── Label / Kicker / Eyebrow (unified) ── */
.label,
.scl-kicker,
.eyebrow {
  display: block; font-family: 'Inter', system-ui, sans-serif !important; font-size: var(--text-xs) !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--amber) !important; margin-bottom: var(--space-4) !important; line-height: 1.4 !important;
}

/* ── Lead paragraph ── */
.lead,
.scl-lead {
  font-family: 'Inter', system-ui, sans-serif; font-size: var(--text-lg) !important; font-weight: 400; line-height: 1.75; color: var(--muted) !important;
}

/* ── Blockquote ── */
blockquote {
  font-family: 'Playfair Display', Georgia, serif; font-size: var(--text-4xl); font-weight: 700; font-style: italic; line-height: 1.2; color: var(--green); margin: var(--space-8) 0; padding-left: var(--space-6); border-left: 4px solid var(--amber);
}

/* ── Small / Caption ── */
small {
  font-size: var(--text-xs); line-height: 1.5;
}

/* ── Strong ── */
strong, b {
  font-weight: 700;
}

/* ── Links ── */
a {
  color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease);
}