/* ============================================
   TYPOGRAPHY SYSTEM - INFINITE GRATITUDE PROJECT
   ============================================
   
   This file defines the formal typography system for the site.
   All typography follows strict rules to maintain consistency and readability.
   
   DESIGN PRINCIPLES:
   1. Maximum 3 font families (Inter, Playfair Display, Crimson Text)
   2. Golden Ratio (1.618) based size scale for harmonious hierarchy
   3. Limited font weights (400, 500, 600 only - no bold/700)
   4. Consistent line heights for readability
   5. Standardized header sizes using golden ratio
   6. Minimal use of italics - only for quotes and special emphasis
   
   GOLDEN RATIO SCALE (φ = 1.618):
   Starting from base 1rem, each level multiplies by 1.618
   Going down, each level divides by 1.618
   
   ============================================ */

:root {
    /* Golden Ratio constant */
    --phi: 1.618;
    
    /* ============================================
       FONT FAMILIES - Only 3 families
       ============================================ */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Crimson Text', serif;
    /* Note: Dancing Script removed - use sparingly only if absolutely necessary */
    
    /* ============================================
       FONT SIZES - Golden Ratio Scale
       Base: 1rem (16px)
       ============================================ */
    /* Below base (divide by φ) */
    --font-size-xs: 0.618rem;      /* ~9.9px - Tiny labels */
    --font-size-sm: 0.764rem;      /* ~12.2px - Small text, metadata */
    
    /* Base level */
    --font-size-base: 1rem;        /* 16px - Base body text */
    
    /* Above base (multiply by φ) */
    --font-size-md: 1.236rem;      /* ~19.8px - Large body text */
    --font-size-lg: 1.618rem;      /* ~25.9px - Emphasized text */
    --font-size-xl: 2rem;          /* ~32px - Small headings */
    --font-size-2xl: 2.618rem;     /* ~41.9px - Section headings */
    --font-size-3xl: 4.236rem;     /* ~67.8px - Large section headings */
    --font-size-4xl: 6.854rem;     /* ~109.7px - Hero headings */
    
    /* Responsive clamp sizes for headings - based on golden ratio */
    --font-size-h1: clamp(2.618rem, 6vw, 4.236rem);    /* Hero title - φ² to φ³ */
    --font-size-h2: clamp(2rem, 4vw, 2.618rem);        /* Section headings - φ to φ² */
    --font-size-h3: clamp(1.618rem, 3vw, 2rem);       /* Subsection headings - base to φ */
    --font-size-h4: clamp(1.236rem, 2.5vw, 1.618rem); /* Card/feature headings - md to lg */
    
    /* ============================================
       FONT WEIGHTS - Simplified (3 weights only)
       ============================================ */
    --font-weight-normal: 400;     /* Body text default - use for all body text */
    --font-weight-medium: 500;     /* UI elements, navigation, labels */
    --font-weight-semibold: 600;   /* Headings, emphasis - use for all headings */
    /* Note: No bold (700) or light (300) - keep it simple */
    
    /* ============================================
       LINE HEIGHTS - Standardized
       ============================================ */
    --line-height-tight: 1.2;     /* Headings */
    --line-height-normal: 1.5;    /* Body text */
    --line-height-relaxed: 1.7;   /* Long-form reading */
    --line-height-loose: 1.8;     /* Paragraphs, quotes */
    
    /* ============================================
       LETTER SPACING
       ============================================ */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;
}

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */
body {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

/* ============================================
   HEADINGS - Standardized Hierarchy
   ============================================ */
h1, .h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

h2, .h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

h3, .h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

h4, .h4 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

h5, .h5 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

h6, .h6 {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

/* ============================================
   BODY TEXT - Standardized
   ============================================ */
p, .text-body {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-loose);
    color: var(--color-text-secondary);
    margin-bottom: 1.25rem;
    max-width: 65ch; /* Optimal reading width */
}

.text-small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.text-large {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}

/* ============================================
   UI ELEMENTS - Inter Font
   ============================================ */
button, .btn,
input, textarea, select,
.nav-link, .nav-item,
.label, .caption {
    font-family: var(--font-ui);
}

button, .btn {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

.nav-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.label, .caption {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

/* ============================================
   SPECIAL TEXT STYLES - Use sparingly
   ============================================ */
.text-italic {
    font-style: italic;
    /* Use ONLY for quotes and special emphasis - avoid elsewhere */
}

.text-emphasis {
    font-weight: var(--font-weight-semibold);
    /* Use instead of bold - maintains consistency */
}

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* ============================================
   QUOTES & BLOCKQUOTES
   ============================================ */
blockquote, .quote {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-style: italic;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-loose);
    color: var(--color-text-secondary);
    border-left: 4px solid var(--color-cta-primary);
    padding-left: 1.5rem;
    margin: 2rem 0;
}

/* ============================================
   USAGE RULES & GOVERNANCE
   ============================================
   
   RULE 1: FONT FAMILY ASSIGNMENT
   - Inter (--font-ui): Buttons, navigation, forms, UI elements
   - Playfair Display (--font-heading): All headings (h1-h6)
   - Crimson Text (--font-body): Body text, paragraphs, quotes
   - Dancing Script (--font-decorative): Only for special decorative elements
   
   RULE 2: FONT SIZE HIERARCHY
   - Use CSS variables for all font sizes
   - Headings use responsive clamp() values
   - Body text uses fixed rem values
   - Never use arbitrary pixel values
   
   RULE 3: FONT WEIGHT USAGE (Simplified - 3 weights only)
   - 400 (normal): All body text, paragraphs, quotes
   - 500 (medium): UI labels, navigation, buttons
   - 600 (semibold): All headings (h1-h6), emphasis
   - NO bold (700), NO light (300) - keep it cohesive
   
   RULE 4: LINE HEIGHT USAGE
   - 1.2: Headings only
   - 1.5: UI elements, short text
   - 1.7: Body paragraphs
   - 1.8: Long-form reading, quotes
   
   RULE 5: COLOR USAGE
   - Use color-system.css variables
   - --color-text-primary: Headings
   - --color-text-secondary: Body text
   - --color-text-tertiary: Supporting text
   - --color-text-muted: Subtle text
   
   ============================================
   ANTI-PATTERNS (DO NOT DO)
   ============================================
   
   ❌ Using font-size with arbitrary pixel values (e.g., font-size: 13px)
   ❌ Mixing font families within the same element
   ❌ Using font-weight: 900 or other non-standard weights
   ❌ Creating new font sizes without adding to the scale
   ❌ Using Dancing Script for body text or headings
   ❌ Inconsistent line heights
   ❌ Hard-coding colors instead of using CSS variables
   
   ============================================
   APPROVED PATTERNS
   ============================================
   
   ✅ Using CSS variables for all typography
   ✅ Consistent heading hierarchy (h1 > h2 > h3 > h4)
   ✅ Responsive clamp() for headings
   ✅ Fixed rem values for body text
   ✅ Consistent line heights based on content type
   ✅ Using color-system.css variables for text colors
   
   ============================================ */

/* Example Usage:
   
   .hero-title {
       font-family: var(--font-heading);
       font-size: var(--font-size-h1);
       font-weight: var(--font-weight-semibold);
       line-height: var(--line-height-tight);
       color: var(--color-text-primary);
   }
   
   .body-text {
       font-family: var(--font-body);
       font-size: var(--font-size-md);
       line-height: var(--line-height-loose);
       color: var(--color-text-secondary);
   }
   
   .nav-link {
       font-family: var(--font-ui);
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-medium);
   }
*/