/* ==========================================================================
   BASE
   Resets + element defaults + typography classes built ONLY from tokens.css.
   No hardcoded colors/sizes/spacing should appear below this comment.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
  /* Reserves scrollbar space on every page regardless of whether that
     page's content is actually tall enough to scroll — without this, a
     short page (About) renders ~15px wider than a long one (Home, Case
     Study), shifting the nav/content a few pixels sideways between pages. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Theme: the <head> bootstrap sets html[data-theme]; tokens.css holds both
   palettes. color-scheme keeps native UI (scrollbars, form controls, the
   default <dialog> canvas) in step with the page. */
:root { color-scheme: light; }

/* Page shell: footer sits at the bottom of the viewport on short pages
   (e.g. About) without being position:fixed, and follows content
   normally on pages long enough to scroll. */
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  /* Page wash: pale blue at the top, fading into the page background
     (tokens.css). One reusable gradient on every page, under the grid. */
  background: linear-gradient(to bottom, var(--color-page-tint) 0, var(--color-bg) var(--page-tint-end)) no-repeat var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body200-size);
  font-weight: var(--text-body200-weight);
  line-height: var(--text-body200-leading);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
/* <body> carries the 160% body leading so prose inherits it. Compact UI text
   that only ever inherited its leading keeps the tighter UI value. */
.skip-link,
.site-footer,
.case-cta__link,
.callout-reflection__kicker,
.case-next__label,
.modal-card .modal-card__caption { line-height: var(--text-ui-leading); } /* the popup's fixed 701px geometry */

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* blockquote added per fidelity audit: Chrome's UA default (margin: 1em
   40px) was silently eating 80px of horizontal space from
   .callout-reflection's flex-allocated width, making it look like a
   flex-grow/ratio bug when it was really just an unreset margin. */
h1, h2, h3, h4, p, blockquote { margin: 0; }
/* Emphasis inside Light body copy is Bold (Figma "Body200 Bold"). Pinned
   because the UA's `bolder` is relative. */
b, strong { font-weight: var(--weight-bold); }

/* Visible on :focus-visible only, so mouse users don't see an outline on
   click — but every interactive element gets one when reached by keyboard. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-blue-text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------
   Typography classes — one class per named Figma text style. Case study
   pages, About, and any future page reuse these instead of redeclaring
   font rules, so the type scale can only drift in one place (tokens.css).
   -------------------------------------------------------------------- */
.text-h100 { font-family: var(--text-h100-font); font-size: var(--text-h100-size); font-weight: var(--text-h100-weight); line-height: var(--text-h100-leading); }
.text-h200 { font-family: var(--text-h200-font); font-size: var(--text-h200-size); font-weight: var(--text-h200-weight); line-height: var(--text-h200-leading); }
.text-h300 { font-family: var(--text-h300-font); font-size: var(--text-h300-size); font-weight: var(--text-h300-weight); line-height: var(--text-h300-leading); }
.text-h400 { font-family: var(--text-h400-font); font-size: var(--text-h400-size); font-weight: var(--text-h400-weight); line-height: var(--text-h400-leading); }
.text-stat { font-family: var(--text-stat-font); font-size: var(--text-stat-size); font-weight: var(--text-stat-weight); line-height: var(--text-stat-leading); }

.text-body100 { font-family: var(--text-body100-font); font-size: var(--text-body100-size); font-weight: var(--text-body100-weight); line-height: var(--text-body100-leading); }
.text-body100-medium { font-family: var(--text-body100-medium-font); font-size: var(--text-body100-medium-size); font-weight: var(--text-body100-medium-weight); line-height: var(--text-body100-medium-leading); }
.text-body200 { font-family: var(--text-body200-font); font-size: var(--text-body200-size); font-weight: var(--text-body200-weight); line-height: var(--text-body200-leading); }
.text-body300 { font-family: var(--text-body300-font); font-size: var(--text-body300-size); font-weight: var(--text-body300-weight); line-height: var(--text-body300-leading); }
.text-body300-medium { font-family: var(--text-body300-medium-font); font-size: var(--text-body300-medium-size); font-weight: var(--text-body300-medium-weight); line-height: var(--text-body300-medium-leading); }

.text-details100 { font-family: var(--text-details100-font); font-size: var(--text-details100-size); font-weight: var(--text-details100-weight); line-height: var(--text-details100-leading); text-transform: uppercase; }
.text-details200 { font-family: var(--text-details200-font); font-size: var(--text-details200-size); font-weight: var(--text-details200-weight); line-height: var(--text-details200-leading); text-transform: uppercase; }

.text-legal { font-family: var(--text-legal-font); font-size: var(--text-legal-size); font-weight: var(--text-legal-weight); font-style: var(--text-legal-style); line-height: var(--text-legal-leading); }

/* Color utility classes — kept intentionally few. This is a design system,
   not a utility-CSS framework: only the colors that are reused as
   standalone text tints (not component-specific) get a class. */
.text-ink   { color: var(--color-ink); }
.text-blue  { color: var(--color-blue); }
.text-gray  { color: var(--color-gray); }
.text-gray-2 { color: var(--color-gray-2); }

/* --------------------------------------------------------------------
   Skip-to-content link. First focusable element in the document; targets
   the existing <main id="main">. Hidden off the top of the viewport until
   focused, using transform on a position:fixed element so it never
   occupies layout space or shifts the nav. Built from existing tokens.
   -------------------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1000;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-detail);
  font-size: var(--text-details200-size);
  text-transform: uppercase;
  transform: translateY(calc(-100% - var(--space-md)));
  transition: transform var(--duration-base) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); }
/* <main> carries tabindex="-1" purely so the skip link can move focus to
   it (-1 keeps it out of the tab order). Suppress the focus ring: the
   sitewide [tabindex]:focus-visible rule above would otherwise draw a
   full-page outline around <main> after the skip link is used. */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible { outline: none; }

/* Visually hidden but still available to assistive tech */
.sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}