/*
 * font.css — Expert Tutorials Global Font Settings
 * ─────────────────────────────────────────────────
 * To change fonts, update the two variables below:
 *   --font-heading   : controls all h1–h6 and .font-serif
 *   --font-body      : controls all body text and paragraphs
 *
 * Current heading font : "Playfair Display" (elegant serif)
 * Current body font    : "Inter"            (clean sans-serif)
 *
 * To experiment, replace the font name in the @import URL
 * and the --font-* variable value, then take a screenshot.
 *
 * POPULAR ALTERNATIVES:
 *   Headings (serif)     : Cormorant Garamond | Lora | Libre Baskerville | EB Garamond
 *   Headings (modern)    : DM Serif Display   | Fraunces | Bodoni Moda
 *   Body (sans)          : DM Sans | Nunito | Poppins | Plus Jakarta Sans | Outfit
 * ─────────────────────────────────────────────────
 */

/* ── HEADING FONT ── */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap");

/* ── BODY FONT ── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");

:root {
  /* Change only the font-family value to switch fonts */
  --font-heading : "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body    : "Inter", system-ui, -apple-system, sans-serif;
}

/* Apply fonts */
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.font-serif,
.etf2-name,
.etf2-headline,
[class*="font-serif"] {
  font-family: var(--font-heading);
}