/* ============================================================
   SHARED BASE — New Sites, v2.0 (2026-09-09)

   ACCESSIBILITY PRIMITIVES ONLY.

   This file deliberately contains NO layout, NO components, and
   NO visual identity. Cards, grids, heroes, buttons, headers and
   signup blocks live in each site's own site.css, because those
   are design decisions and they differ per customer persona.
   See _PLAN/01_DESIGN_REVIEW_BY_PERSONA.md.

   A shared component library across six different businesses is
   how six sites end up looking like one template in six colours.
   That is the specific thing this file is written to avoid.
   ============================================================ */

/* ---- Tokens every site must define in its own site.css ----
   Only fallbacks live here, so nothing is ever unreadable if a
   token is missed. They are intentionally plain — a site that
   looks like this has not been designed yet.
   --------------------------------------------------------- */
:root {
  --ink:        #1a1a1a;
  --paper:      #ffffff;
  --accent:     #1f4e79;
  --accent-ink: #ffffff;
  --focus:      #b45309;   /* deliberately independent of --accent so the
                              focus ring stays visible on accent-coloured controls */
  --measure:    68ch;
}

/* ---- Reset ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
img, picture, svg, video { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }

/* ---- Motion -------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Document ------------------------------------------- */
body {
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

/* ---- Skip link: first focusable element on every page ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---- Focus is always visible ---------------------------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Safe only because :focus-visible above always restores a ring. */
:focus:not(:focus-visible) { outline: none; }

/* ---- Readable measure on prose -------------------------- */
p, li { max-width: var(--measure); }

/* ---- Touch targets -------------------------------------- */
a, button, input[type="submit"], label { touch-action: manipulation; }
button, .btn, input[type="submit"] { min-height: 44px; }

/* ---- Forms: labels are never optional ------------------- */
label { display: block; }
input, textarea, select { min-height: 44px; }

/* ---- Wide content scrolls in its own container ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; }

/* ---- Screen-reader-only --------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Respect forced-colors / high-contrast modes -------- */
@media (forced-colors: active) {
  .skip-link, button, .btn { border: 1px solid; }
}