/* ========================================================================== typography.css Base type rules. Font files load via Google Fonts link in (see index.html TODO to self-host later for performance). ========================================================================== */ html { scroll-behavior: auto; /* Lenis takes over smooth scrolling via JS */ } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-charcoal); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .font-heading { font-family: var(--font-heading); font-weight: 700; line-height: var(--lh-heading); color: var(--color-charcoal); letter-spacing: -0.01em; margin: 0; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 800; } h2 { font-size: var(--fs-h2); font-weight: 800; } h3 { font-size: var(--fs-h3); font-weight: 700; } h4 { font-size: var(--fs-h4); font-weight: 700; } p { margin: 0 0 var(--space-4); color: var(--color-charcoal-muted); } .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--color-charcoal-muted); } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } ul, ol { margin: 0; padding: 0; list-style: none; } .text-gradient { background: linear-gradient(100deg, var(--color-primary) 0%, var(--color-primary-light) 60%, var(--color-accent) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; } .text-accent { color: var(--color-accent); } .text-primary-brand { color: var(--color-primary); } .text-muted-custom { color: var(--color-charcoal-muted); } small, .text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); }