/* Reset + baseline typography. Applies globally. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html, body { margin: 0; padding: 0; min-height: 100%; } body { font-family: var(--font-family); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--color-text); background-color: var(--color-bg); /* direction comes from — do not override here. */ } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--color-text); letter-spacing: -0.01em; } h1 { font-size: var(--fs-3xl); font-weight: var(--fw-light); letter-spacing: -0.02em; } h2 { font-size: var(--fs-2xl); font-weight: var(--fw-light); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } p { margin: 0 0 var(--space-3); line-height: var(--lh-relaxed); color: var(--color-text); } a { color: var(--color-sage-dark); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--color-terracotta); } button { font-family: inherit; cursor: pointer; } img, svg, video { max-width: 100%; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } /* Selection */ ::selection { background: var(--color-sage-light); color: var(--color-text); } /* Focus ring */ :focus-visible { outline: 2px solid var(--color-sage-dark); outline-offset: 2px; border-radius: var(--radius-sm); } /* Utility: visually hidden but accessible to screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }