@import url("/fonts/fonts.css"); @import url("/design-tokens.css?v=1"); /* ===== base.css ===== */ /* ============================================================================= NutraTech — Base & App Shell Reset, typography defaults, and the persistent shell (sidebar + topbar). Depends on design-tokens.css. ============================================================================= */ /* ---- Fonts ---------------------------------------------------------------- */ /* ---- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-primary); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv05" 1, "ss01" 1; } h1, h2, h3, h4, h5, p, figure { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { margin: 0; padding: 0; list-style: none; } table { border-collapse: collapse; width: 100%; } svg { display: block; } /* FOCUS MUST BE VISIBLE. This was `box-shadow: var(--ring-focus)` — a 35%-alpha wash measuring ~1.5:1, effectively invisible on white and on the dark sidebar, so a keyboard user could not tell where they were. Worse, box-shadow is a SINGLE non-additive property and this rule carries only 0-1-0 specificity, so every later component that sets its own elevation shadow (.btn--primary, .btn--sign, .segmented button.is-active, .vtab.is-active) replaced the ring entirely — the primary action buttons had NO focus indicator at all. `outline` is a separate property, so nothing can overwrite it by setting a shadow, and it follows the element's own border-radius (making the radius override here unnecessary — pills stay pills). --focus-ring is the solid #2a8782 = 4.30:1 on white. */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: none; } /* The sidebar is dark teal; the same ring there is ~1.3:1. White reads 8.9:1 on it. */ .sidebar :focus-visible, .sidebar__foot :focus-visible { outline-color: #ffffff; } ::selection { background: var(--teal-200); } /* ---- Type helpers --------------------------------------------------------- */ .t-label { font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .ic { width: 18px; height: 18px; flex: none; } .t-num { font-variant-numeric: tabular-nums; } .t-muted { color: var(--text-muted); } .t-secondary { color: var(--text-secondary); } .t-sm { font-size: var(--text-sm); } .t-xs { font-size: var(--text-xs); } .t-lg { font-size: var(--text-lg); } .section-title { font-size: var(--text-md); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-primary); } /* ============================================================================= APP SHELL ============================================================================= */ /* The sidebar is ALWAYS injected by sidebar.js as a position:fixed rail + a body margin (no page carries a static