/* ============================================================================ * Typography * Heading hierarchy uses fluid clamp() values from _root.css. * Body text is set on ; headings on tag selectors so semantic markup * "just works" without utility classes. * ========================================================================== */ html { font-size: 100%; /* respect user setting; 1rem = 16px by default */ } body { font-family: var(--wb-font-sans); font-size: var(--wb-text-base); font-weight: var(--wb-fw-regular); color: var(--wb-color-text); background-color: var(--wb-color-bg); line-height: var(--wb-lh-normal); letter-spacing: var(--wb-ls-normal); } h1, h2, h3, h4, h5, h6 { font-family: var(--wb-font-display); color: var(--wb-color-ink); font-weight: var(--wb-fw-semibold); line-height: var(--wb-lh-tight); letter-spacing: var(--wb-ls-tight); } h1 { font-size: var(--wb-h1); font-weight: var(--wb-fw-bold); } h2 { font-size: var(--wb-h2); font-weight: var(--wb-fw-bold); } h3 { font-size: var(--wb-h3); } h4 { font-size: var(--wb-h4); } h5 { font-size: var(--wb-h5); } h6 { font-size: var(--wb-h6); font-weight: var(--wb-fw-medium); } p { line-height: var(--wb-lh-relaxed); color: var(--wb-color-text); } small, .wb-text-helper { font-size: var(--wb-text-sm); color: var(--wb-color-text-muted); } .wb-text-eyebrow { font-size: var(--wb-text-sm); font-weight: var(--wb-fw-medium); letter-spacing: var(--wb-ls-wide); text-transform: uppercase; color: var(--wb-color-text-muted); } .wb-text-lead { font-size: clamp(1.125rem, 1vw + 1rem, 1.375rem); line-height: var(--wb-lh-relaxed); color: var(--wb-color-text); font-weight: var(--wb-fw-regular); } a { color: var(--wb-color-brand); transition: color var(--wb-duration-base) var(--wb-ease); } a:hover { color: var(--wb-color-brand-hover); } a:focus-visible { outline: var(--wb-focus-width) solid var(--wb-color-focus-ring); outline-offset: 2px; border-radius: var(--wb-radius-xs); } strong, b { font-weight: var(--wb-fw-semibold); } em, i { font-style: italic; } code, kbd, samp, pre { font-family: var(--wb-font-mono); font-size: 0.95em; } code { background: var(--wb-color-bg-muted); padding: 0.125em 0.375em; border-radius: var(--wb-radius-xs); } pre { background: var(--wb-color-bg-muted); padding: var(--wb-space-4); border-radius: var(--wb-radius-md); overflow-x: auto; } blockquote { border-left: 3px solid var(--wb-color-brand); padding: var(--wb-space-2) var(--wb-space-5); color: var(--wb-color-ink-2); font-size: var(--wb-text-lg); line-height: var(--wb-lh-relaxed); } ::selection { background: var(--wb-color-brand); color: var(--wb-color-white); }