/* ================================================================= Anchor Us Design System -- base.css Reset, typography utility classes, .icon family, and atomic utility classes. Loaded after tokens.css and before components.css. The reset is the same shape as Eric Meyer's classic plus box-sizing: border-box and a couple of project-specific tweaks (link colour inheritance, button defaults, list-style none). ================================================================= */ /* ---------- Reset ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; } body { font-family: var(--sans); background: var(--linen); color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; } input, select, textarea { font-family: inherit; } /* ---------- Bare element defaults ---------- Sensible defaults so unstyled markup (operator-console PHP renders, ad-hoc admin pages) doesn't look broken. Components below override these for explicit page titles / card titles / etc. */ h1 { font-family: var(--serif); font-size: 22px; line-height: 30px; font-weight: 400; color: var(--ink); } h2 { font-size: 18px; font-weight: 600; color: var(--ink); } h3 { font-size: 16px; font-weight: 600; color: var(--ink); } h4 { font-size: 14px; font-weight: 600; color: var(--ink-label); } a { color: var(--sage-600); } a:hover { text-decoration: underline; } small, .text-muted { color: var(--ink-muted); font-size: 12.5px; } hr { border: 0; border-top: 0.5px solid var(--divider); margin: var(--space-4) 0; } code, pre { font-family: var(--mono); font-size: 12.5px; } pre { background: var(--linen-inset); padding: var(--space-3); border-radius: var(--radius-xs); overflow-x: auto; } /* ---------- Typography utility classes ---------- Scale from BRAND_V2.md §4. Fraunces display classes are intimate-mode only (Us, onboarding, invite, personal Settings). Playfair .title is used in everyday-mode page headers. Karla covers everything else. */ .display-lg { font-family: var(--serif-display); font-variation-settings: "opsz" 144, "SOFT" 100; font-weight: 350; font-size: 40px; line-height: 48px; letter-spacing: -0.01em; color: var(--ink); } .display { font-family: var(--serif-display); font-variation-settings: "opsz" 96, "SOFT" 100; font-weight: 400; font-size: 32px; line-height: 40px; letter-spacing: -0.005em; color: var(--ink); } .display-sm { font-family: var(--serif-display); font-variation-settings: "opsz" 48, "SOFT" 100; font-weight: 400; font-size: 24px; line-height: 32px; color: var(--ink); } .title { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 30px; color: var(--ink); } .subtitle { font-family: var(--sans); font-weight: 500; font-size: 17px; line-height: 24px; color: var(--ink); } .body-sm { font-size: 14px; line-height: 22px; } .caption { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-muted); } .eyebrow { font-size: 11px; line-height: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); } /* ---------- Icon utility ---------- Used with the inline sprite at the top of . Icons default to 1em so they flow with surrounding text and inherit currentColor. */ .icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; } .icon-sm { width: .85em; height: .85em; } .icon-lg { width: 1.25em; height: 1.25em; } .icon-xl { width: 1.5em; height: 1.5em; } /* ---------- Atomic utility classes ---------- Tiny single-purpose helpers. Same surface area as family-hub-app's utility row -- if a class is here, it's because the same string appeared in HTML/JS often enough to deserve a name. */ .text-muted { color: var(--ink-muted); } .text-dim { color: var(--ink-dim); } .text-accent { color: var(--sage-500); } .text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-info { color: var(--info); } .text-mono { font-family: var(--mono); } .text-serif { font-family: var(--serif); } .text-sm { font-size: .8rem; } .text-xs { font-size: .7rem; } .text-center { text-align: center; } .text-right { text-align: right; } .fw-500 { font-weight: 500; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .flex { display: flex; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .gap-sm { gap: .5rem; } .gap-md { gap: .75rem; } .hidden { display: none !important; } .strikethrough { text-decoration: line-through; color: var(--ink-dim); } .cursor-pointer { cursor: pointer; } /* ---------- Accessibility primitives ---------- .sr-only hides content visually while keeping it available to screen readers. .sr-only-focusable reveals the element when focused -- used for skip-to-content links. */ .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; } .sr-only-focusable:focus, .sr-only-focusable:active { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--paper); color: var(--ink); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); box-shadow: var(--shadow-focus); }