/* ==========================================
   GLOBAL TYPOGRAPHY - SINGLE SOURCE OF TRUTH
   ==========================================
   
   🤖 LLM INSTRUCTION (Claude/GPT/etc.):
   ----------------------------------------
   When creating or editing partials:
   
   1. DO NOT add font-family declarations inline or in <style> blocks
   2. USE the CSS variables defined below instead
   3. READ this file first when working on typography
   
   Available Font Variables:
   -------------------------
   --font-body      → Body text, paragraphs, buttons, UI elements
   --font-display   → Headlines, section titles, emphasis
   --font-accent    → Special decorative use (hero, quotes)
   
   Available Utility Classes:
   --------------------------
   .font-body       → Forces body font
   .font-display    → Forces display font
   .font-accent     → Forces accent font
   
   To add a NEW unique font:
   1. Add it to Google Fonts link in head.php
   2. Create a new CSS variable here (e.g., --font-special)
   3. Create a utility class (e.g., .font-special)
   4. Document it in this comment block
   
   ========================================== */

/* ==========================================
   Font Variables
   ========================================== */
:root {
    /* Primary body font - clean, readable, modern */
    --font-body: 'Inter', sans-serif;

    /* Display font - elegant headlines and titles */
    --font-display: 'Inter', sans-serif;

    /* Accent font - special emphasis, hero sections, quotes */
    /* Using Merriweather for warm, readable serif accent */
    --font-accent: 'Inter', serif;
}

/* ==========================================
   Default Font Application
   ========================================== */

/* Body inherits to all elements by default */
body {
    font-family: var(--font-body);
}

/* Headlines use display font by default */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
}

/* ==========================================
   Utility Classes for Overrides
   Use these when you need to override defaults
   ========================================== */
.font-body {
    font-family: var(--font-body) !important;
}

.font-display {
    font-family: var(--font-display) !important;
}

.font-accent {
    font-family: var(--font-accent) !important;
}

/* ==========================================
   Section-Specific Typography (Optional)
   Add here if a section needs unique treatment
   ========================================== */

/* Example: Hero section might want larger, bolder headlines */
/* .hero-headline { font-family: var(--font-accent); } */

/* Example: Mission section with special styling */
/* .mission-title { font-family: var(--font-display); } */