/* ============================================================
   Theme — Typography
   Modeled on Ignite's theme/typography.ts.

   Font families, weights, a size scale, and line heights.
   All font @imports for the site live here, in one place.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3&family=Outfit:wght@300;400;600;700&display=swap');

:root {
  /* ---------- Families ---------- */
  --font-heading: 'Playfair Display', serif;
  --font-content: 'Georgia', 'Times New Roman', serif;
  --font-ui: 'Outfit', sans-serif;
  --font-sans: 'Source Sans 3', sans-serif;

  /* ---------- Weights ---------- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-bold-heading: var(--font-weight-semibold);

  /* ---------- Size scale ---------- */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.85rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3rem;

  /* Semantic size aliases (existing names, mapped to the scale) */
  --font-size-base: var(--font-size-md);
  --font-size-base-plus: var(--font-size-lg);
  --font-size-small: var(--font-size-xs);
  --font-size-medium: var(--font-size-sm);
  --font-size-heading: var(--font-size-2xl);
  --font-size-heading-medium: var(--font-size-xl);
  --font-size-heading-xl: var(--font-size-3xl);
  --font-size-page-title: var(--font-size-4xl);
  --font-size-heading-mobile: var(--font-size-xl);
  --font-size-page-heading-mobile: var(--font-size-2xl);
  --font-size-section-heading-mobile: 1.85rem;

  /* Site title in the fixed header (shrinks on scroll) */
  --font-size-site-title: 3rem;
  --font-size-site-title-scrolled: 1.5rem;

  /* ---------- Line heights ---------- */
  --line-height-tight: 1.3;
  --line-height-body: 1.7;
  --line-height-relaxed: 1.8;
}