/* ---- External font loading (documented placeholder) ----
The approved masters render with Plus Jakarta Sans + Inter. For the
standalone frontend preview we load them from Google Fonts with
display=swap (no font files are packaged in this deliverable).
Prompt #11 may replace this with self-hosted woff2 +
for best LiteSpeed performance. Fallback stack below prevents invisible
text if the import is blocked. */
/* (font lives in each page — see below) */
/* ============================================================
base.css — reset, box-sizing, font loading, base elements,
skip link, global focus. Loads after tokens.css.
Faithful to the approved masters (Inter body / Plus Jakarta Sans headings).
============================================================ */
/* ---- Font loading (self-hosted woff2 added in Prompt #11) ----
font-display:swap per Design Freeze §5. Fallbacks prevent invisible text.
TODO (Prompt #11): @font-face with real woff2 files + . */
:root{
--lh-font-head:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--lh-font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* ---- Reset / box model ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
margin:0;
font-family:var(--lh-font-body);
font-size:16px;
line-height:1.65;
color:var(--lh-color-ink);
background:var(--lh-color-bg);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
font-feature-settings:"kern","liga","calt";
overflow-x:hidden; /* mobile-safe: never allow page-level horizontal scroll */
}
h1,h2,h3,h4{font-family:var(--lh-font-head);margin:0;color:var(--lh-color-ink)}
p{margin:0}
a{color:inherit}
img,svg,video{max-width:100%;height:auto;display:block}
button{font-family:inherit;font-size:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
/* ---- Accessible focus (visible ring, never removed) ---- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
outline:none;
box-shadow:var(--lh-focus-ring);
border-radius:6px;
}
/* ---- Skip to content link (WCAG 2.4.1) ---- */
.skip-link{
position:absolute;left:16px;top:-48px;z-index:var(--lh-z-toast);
background:var(--lh-color-ink);color:#fff;padding:10px 16px;border-radius:var(--lh-radius-input);
font-size:14px;font-weight:600;text-decoration:none;transition:top var(--lh-transition-fast);
}
.skip-link:focus{top:16px}
/* ---- Reduced motion (WCAG 2.3.3 / 2.2.2) ---- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important;
}
}
/* ---- Visually-hidden (for SR-only labels / live regions) ---- */
.sr-only{
position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}