/* =============================================================
   typography.css — Global Typography System
   Siti Fatima Painter Portfolio
   ============================================================= */

/* ── Google Fonts Import ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:wght@400;500&display=swap');

/* ── Base Body ──────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-dark);
  background: var(--color-bg-cream);
}

/* ── Headings ───────────────────────────────────────────────── */
h1 {
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
}

h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
}

/* ── Paragraph ──────────────────────────────────────────────── */
p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
}

/* ── Utility: Section Label ─────────────────────────────────── */
.section-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gold);
}

/* ── Utility: Gold Text ─────────────────────────────────────── */
.gold-text {
  color: var(--color-gold);
}

/* ── Utility: Large Decorative Quote ───────────────────────── */
.large-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 2rem;
  line-height: 1.4;
  color: var(--color-gold);
  opacity: 0.3;
}

/* ── Responsive Typography ──────────────────────────────────── */
@media (max-width: 768px) {
  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  .large-quote {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2.2rem;
  }

  h2 {
    font-size: 1.6rem;
  }
}