/* * Google Fonts (Inter, Playfair Display, Material Symbols) are loaded via * in each page's (after preconnect) rather than * @import here — @import is render-blocking and chains behind the stylesheet * fetches, delaying first paint. */ /* Base Typography */ body { font-family: var(--font-sans); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-text-primary); } /* Headings */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-text-primary); } h1 { font-size: var(--font-size-5xl); } h2 { font-size: var(--font-size-4xl); } h3 { font-size: var(--font-size-3xl); } h4 { font-size: var(--font-size-2xl); } h5 { font-size: var(--font-size-xl); } h6 { font-size: var(--font-size-lg); } /* Paragraphs */ p { margin-bottom: var(--spacing-md); line-height: var(--line-height-relaxed); } /* Links */ a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent-gold); } /* Responsive Typography */ @media (max-width: 768px) { h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } }