/**
 * EatMeals Typography System — "The Modern Larder"
 * ==================================================
 * 
 * This file establishes the typography hierarchy for the new design system.
 * 
 * Font Stack:
 * - Headings: Playfair Display (serif) — editorial, premium feel
 * - Body: Inter (sans-serif) — clean, readable
 * - Data/Mono: JetBrains Mono — prices, nutrition, data points
 * 
 * Note: Fonts are loaded via Google Fonts CDN with display=swap.
 * This file overrides the legacy global-fonts.css definitions.
 * 
 * @version 1.0.0
 * @date 2026-02-02
 */

/* ============================================
 * FONT STACK DEFINITIONS
 * ============================================
 * 
 * These override the legacy global-fonts.css definitions.
 * tokens.css defines these, but global-fonts.css was overriding them.
 * This file loads AFTER global-fonts.css to ensure correct values.
 */

:root {
  /* Heading Font — Playfair Display for editorial feel
   * Fallback chain: Georgia → Times New Roman → system serif
   */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  
  /* Body Font — Inter for clean readability
   * Fallback chain: system fonts → generic sans-serif
   */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Mono Font — JetBrains Mono for data/prices
   * Fallback chain: SF Mono → Fira Code → generic monospace
   */
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* ============================================
 * BASE TYPOGRAPHY APPLICATION
 * ============================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--text-base, 16px);
  line-height: var(--leading-normal, 1.5);
  color: var(--color-text-primary, #1a1612);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================
 * HEADING STYLES
 * ============================================
 * 
 * All headings use Playfair Display for the editorial feel.
 * Tight letter-spacing for that premium look.
 */

h1, h2, h3, h4, h5, h6,
.heading {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold, 600);
  line-height: var(--leading-tight, 1.15);
  letter-spacing: var(--tracking-tight, -0.015em);
  color: var(--color-text-primary, #1a1612);
}

/* Size-specific adjustments */
h1, .text-5xl { font-size: var(--text-5xl); }
h2, .text-4xl { font-size: var(--text-4xl); }
h3, .text-3xl { font-size: var(--text-3xl); }
h4, .text-2xl { font-size: var(--text-2xl); }
h5, .text-xl { font-size: var(--text-xl); }
h6, .text-lg { font-size: var(--text-lg); }

/* Large display headings get tighter tracking */
h1, h2 {
  letter-spacing: var(--tracking-tighter, -0.03em);
}

/* ============================================
 * TEXT SIZE UTILITY CLASSES
 * ============================================
 * 
 * Standalone size classes that only set font-size.
 * These can be used on any element without forcing heading styles.
 */

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

/* Display sizes for hero headlines */
.text-display-sm { font-size: var(--text-4xl); }
.text-display-md { font-size: var(--text-5xl); }
.text-display-lg { font-size: clamp(3.5rem, 2.5rem + 6vw, 6rem); }

/* ============================================
 * MONO FONT APPLICATION
 * ============================================
 * 
 * JetBrains Mono for:
 * - Prices (gives a scientific, precise feel)
 * - Nutrition data
 * - Code snippets
 * - Data tables
 */

.font-mono,
.price,
.nutrition-value,
code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}

/* Price styling — mono font with medium weight */
.price {
  font-weight: var(--weight-medium, 500);
  letter-spacing: var(--tracking-tight, -0.015em);
}

/* Large prices (like in the bundle builder) */
.price-lg {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: var(--tracking-tight, -0.015em);
}

/* ============================================
 * UTILITY CLASSES
 * ============================================ */

/* Font Family Utilities */
.font-heading { font-family: var(--font-heading) !important; }
.font-body { font-family: var(--font-body) !important; }
.font-mono { font-family: var(--font-mono) !important; }

/* Font Weight Utilities */
.font-normal { font-weight: var(--weight-normal, 400); }
.font-medium { font-weight: var(--weight-medium, 500); }
.font-semibold { font-weight: var(--weight-semibold, 600); }
.font-bold { font-weight: var(--weight-bold, 700); }
.font-extrabold { font-weight: var(--weight-extrabold, 800); }

/* Line Height Utilities */
.leading-none { line-height: var(--leading-none, 1); }
.leading-tight { line-height: var(--leading-tight, 1.15); }
.leading-snug { line-height: var(--leading-snug, 1.25); }
.leading-normal { line-height: var(--leading-normal, 1.5); }
.leading-relaxed { line-height: var(--leading-relaxed, 1.65); }
.leading-loose { line-height: var(--leading-loose, 1.8); }

/* Letter Spacing Utilities */
.tracking-tighter { letter-spacing: var(--tracking-tighter, -0.03em); }
.tracking-tight { letter-spacing: var(--tracking-tight, -0.015em); }
.tracking-normal { letter-spacing: var(--tracking-normal, 0); }
.tracking-wide { letter-spacing: var(--tracking-wide, 0.025em); }
.tracking-wider { letter-spacing: var(--tracking-wider, 0.05em); }
.tracking-widest { letter-spacing: var(--tracking-widest, 0.1em); }

/* ============================================
 * SPECIAL TEXT TREATMENTS
 * ============================================ */

/* Editorial subheadings (like "Your Freezer, Curated") */
.subheading {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-normal, 400);
  font-style: italic;
  letter-spacing: var(--tracking-wide, 0.025em);
  color: var(--color-text-secondary);
}

/* Small caps for labels */
.label-caps {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: var(--tracking-widest, 0.1em);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* Nutrition data styling */
.nutrition-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium, 500);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.025em);
}

.nutrition-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text-primary);
}