/**
 * Font Loading System
 *
 * Template fonts: Instrument Sans (from Webflow template analysis)
 * Branded fonts: Jost, Barlow, Cormorant Garamond (from SSA branding kit)
 *
 * Switch between fonts using site.yml fonts: "template" or "branded"
 *
 * NOTE: Google Fonts are loaded via HTML <link> tags in _font_loader.html.erb
 * to avoid CSS @import ordering warnings with Tailwind CSS v4.
 */

/* ==========================================================================
   Font Family Definitions
   ========================================================================== */

:root {
  /* Template fonts (default) */
  --font-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-heading: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-caption: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-quote: 'Instrument Sans', Georgia, serif;

  /* Serif body font for blog/prose content - always available (Substack/Medium aesthetic) */
  --font-body-serif: 'Lora', 'Georgia', serif;
}

/* Branded font overrides - activated via body class */
.branded-fonts {
  --font-sans: 'Jost', system-ui, -apple-system, sans-serif;
  --font-heading: 'Jost', system-ui, -apple-system, sans-serif;
  --font-body: 'Jost', system-ui, -apple-system, sans-serif;
  --font-caption: 'Barlow', system-ui, -apple-system, sans-serif;
  --font-quote: 'Cormorant Garamond', Georgia, serif;
  /* Serif body font for blog/prose content (Substack/Medium aesthetic) */
  --font-body-serif: 'Lora', 'Georgia', serif;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

.font-caption,
figcaption,
.label {
  font-family: var(--font-caption);
}

.font-quote,
blockquote {
  font-family: var(--font-quote);
}

/* ==========================================================================
   Typography Scale (from Webflow analysis)
   ========================================================================== */

/*
 * H1: text-7xl (4.5rem/72px) font-semibold
 * H2: text-5xl (3rem/48px) font-medium
 * H3: text-3xl (1.875rem/30px) font-medium
 * H4: text-xl (1.25rem/20px) font-medium
 * H5: text-lg (1.125rem/18px) font-medium
 * H6: text-base (1rem/16px) font-medium
 * Body: text-lg (1.125rem/18px) leading-relaxed
 */