/* ============================================================================ NOVA Logistics — Base styles Reset, typography, and global element defaults. Loads after tokens.css. Font note: Google Fonts tags stay in each page's (preconnect hints work best placed there) — this file just establishes how the fonts are *applied* once loaded, so the rules are centralized even if the import tags aren't yet. ========================================================================= */ /* ── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; -webkit-text-size-adjust: 100%; } body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--text); line-height: 1.5; } img { max-width: 100%; display: block; } /* ── Typography ──────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: 'DM Serif Display', serif; color: var(--navy); line-height: 1.25; } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } a { color: var(--navy); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Forms — base element defaults (component-level rules in components.css) */ input, select, textarea, button { font-family: inherit; font-size: 16px; /* keeps iOS from auto-zooming on focus */ } /* ── Accessibility — visible focus ring for keyboard navigation ──────────── */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ── Tap targets — mobile-first minimum sizes (mirrors carpool.php's lead) ── Scoped to primary interactive controls only — NOT a blanket `button` selector, since admin UIs rely on compact icon/sm button variants (.btn-sm, .btn-icon, chips) that intentionally stay smaller. Those variants define their own sizing in components.css and override this. */ .btn, a.btn, .tap-target { min-height: 44px; }