/* =========================================================================
   base.css - LAYER 2 of 4: reset, elements, utilities
   -------------------------------------------------------------------------
   Styles bare HTML elements and provides the handful of utilities used
   across the platform. Contains no components and no page layout.

   Every value comes from tokens.css. No raw values here.

   Contents
     1. Reset
     2. Elements
     3. Focus
     4. Utilities
     5. Typographic helpers
   ========================================================================= */

/* ============================== 1. RESET =============================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* .site-header is sticky at top:0, so anything the browser scrolls to the
     top of the scrollport lands underneath it - every in-page anchor, and
     every Shift+Tab traversal back up the page. That is WCAG 2.2 2.4.11
     Focus Not Obscured, which is AA. --scroll-offset is the measured header
     height and steps down in layout.css. */
  scroll-padding-top: var(--scroll-offset);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--color-surface-default);
  color: var(--color-text-default);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
figure { margin: 0; }

img, svg { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; margin: 0; }


/* ============================= 2. ELEMENTS ============================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* Any surface painted with --color-surface-inverse carries .on-inverse.
   Handling heading colour once here removes the per-component overrides that
   previously appeared in a dozen places. */
.on-inverse h1,
.on-inverse h2,
.on-inverse h3,
.on-inverse h4,
.on-inverse h5,
.on-inverse h6 { color: var(--color-text-inverse); }

a {
  color: inherit;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 0.22em;
}

strong, b { font-weight: var(--weight-semi); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-surface-sunken);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  word-break: break-word;
}

hr {
  border: 0;
  border-top: var(--hairline);
  margin-block: var(--space-6);
}

::selection {
  background: var(--color-accent-wash);
  color: var(--color-text-default);
}


/* ============================== 3. FOCUS ============================== */

/* One focus treatment for the entire platform. :focus-visible keeps the ring
   away from mouse users while always showing it for keyboard users. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* On charcoal the dark ring disappears, so it inverts. Any surface painted
   with --color-surface-inverse must carry .on-inverse. */
.on-inverse :focus-visible {
  outline-color: var(--color-focus-ring-inverse);
}


/* ============================ 4. UTILITIES ============================= */

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

/* Available to assistive technology, invisible on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -6rem;
  z-index: var(--z-skip-link);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}
/* Two-tone, and deliberately not the inverse ring alone.
   The inverse ring was chosen for the link's own charcoal fill, but the ring
   never touches that fill: outline-offset puts three pixels of whatever is
   BEHIND the link on both sides of it. In a production build that is the page
   ground, and gold on it measures 1.47:1 - against the 3:1 WCAG 2.2 asks for
   in 1.4.11. Sampled from a rendered production page, not calculated.
   So the dark ring supplies the contrast on the light ground it actually sits
   on, and the inverse ring fills the offset gap so the indicator survives on a
   dark surface too - the internal prototype banner is one. Both colours are
   the system's existing focus tokens; no other focus state changes. */
.skip-link:focus {
  top: var(--space-4);
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 var(--focus-ring-offset) var(--color-focus-ring-inverse);
}

/* A bypass that belongs to a module rather than the page. Same behaviour as
   the page skip link - invisible until focused - but positioned in the flow
   of its own component instead of pinned to the viewport. */
.skip-link--inline { position: absolute; left: auto; top: auto; }
.skip-link--inline:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link--inline:focus { position: static; display: inline-block; margin-top: var(--space-3); }

/* Constrains prose to a readable line length. */
.measure       { max-width: var(--measure); }
.measure--short { max-width: var(--measure-short); }


/* ======================== 5. TYPOGRAPHIC HELPERS ======================= */

/* Small uppercase label above a heading. The one place the platform uses
   letter-spaced uppercase, so it stays distinctive. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.on-inverse .eyebrow { color: var(--color-accent-on-dark); }

.eyebrow__num {
  padding-right: var(--space-3);
  border-right: var(--hairline-accent);
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: 0;
  color: var(--color-accent-text);
}
.on-inverse .eyebrow__num {
  color: var(--color-accent-on-dark);
  border-right-color: var(--color-border-inverse);
}

/* Heading scale, applied by role rather than by tag, so an h2 can be small
   where the document structure requires an h2 but the design does not. */
.t-display { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.t-3xl     { font-size: var(--text-3xl); }
.t-2xl     { font-size: var(--text-2xl); }
.t-xl      { font-size: var(--text-xl); }
.t-lg      { font-size: var(--text-lg); }

.t-lede {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
.on-inverse .t-lede { color: var(--color-text-inverse-muted); }

.t-muted  { color: var(--color-text-muted); }
.t-subtle { color: var(--color-text-subtle); }
.on-inverse .t-muted,
.on-inverse .t-subtle { color: var(--color-text-inverse-muted); }

.t-sm { font-size: var(--text-sm); }
.t-xs { font-size: var(--text-xs); }