/* Foundations — design tokens + global contracts (transformation brief §§5, 6, 12).
   Loaded before each page's inline styles: tokens are inert until consumed; the global
   rules below fix only sanctioned defects (font fallback leakage, focus visibility,
   reduced motion). Page composition is otherwise unchanged until its Stage 3 slice. */

:root {
  /* §5.1 families */
  --font-display: "Anton", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-sans: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;

  /* §5.2 color */
  --ink-950: #0A121C;
  --ink-975: #080D15;
  --surface-1: #0E1826;
  --surface-2: #142132;
  --text-primary: #EAEEF5;
  --text-secondary: #C7CFDA;
  --text-muted: #8B95A3;
  --border-subtle: rgba(234, 238, 245, .12);
  --border-strong: rgba(234, 238, 245, .28);
  --signal-on-dark: #2AAE70;
  --signal-hover: #34C884;
  --signal-solid: #176947;
  --action-bg: #EAEEF5;
  --action-text: #0A121C;
  --error: #FF6B6B;
  --warning: #F1C75B;
  --info: #68A7FF;

  /* §5.3 spacing scale (approved values only) */
  --space-4: 4px;   --space-8: 8px;   --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px;
  --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-80: 80px;
  --space-96: 96px; --space-128: 128px; --space-160: 160px;
  --section-y-compact: clamp(3.5rem, 6vw, 5rem);
  --section-y: clamp(5rem, 8vw, 8rem);
  --section-y-landmark: clamp(6rem, 10vw, 10rem);

  /* §12.1 breakpoints, containers, gutters, header */
  --bp-sm: 30rem;  --bp-md: 48rem;  --bp-lg: 64rem;  --bp-xl: 80rem;  --bp-2xl: 96rem;
  --container-content: 82rem;
  --container-shell: 90rem;
  --content-max: 82rem;
  --reading-max: 68ch;
  --page-gutter: 1.25rem;
  --header-h: calc(4rem + env(safe-area-inset-top));

  /* §5.5 radius + layers */
  --radius-card: 10px;
  --radius-pill: 999px;
  --shadow-overlay: 0 24px 80px -24px rgba(0, 0, 0, .55);
  --layer-base: 0;
  --layer-decorative: 10;
  --layer-content: 20;
  --layer-sticky: 50;
  --layer-header: 100;
  --layer-overlay: 1000;
  --layer-toast: 1100;

  /* §6.1 motion */
  --motion-instant: 0ms;
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 320ms;
  --motion-hero: 480ms;
  --motion-stagger: 35ms;
  --motion-distance: 12px;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
}

@media (min-width: 30rem)  { :root { --page-gutter: 1.5rem; } }
@media (min-width: 48rem)  { :root { --page-gutter: 2rem; } }
@media (min-width: 64rem)  { :root { --page-gutter: 2.5rem; --header-h: calc(4.5rem + env(safe-area-inset-top)); } }
@media (min-width: 80rem)  { :root { --page-gutter: 3rem; } }
@media (min-width: 96rem)  { :root { --page-gutter: 4rem; } }

/* §5.1 global type inheritance — fixes verified Arial/Times leakage on controls */
html {
  font-family: var(--font-sans);
  font-size: 100%;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body, button, input, select, textarea, option {
  font-family: var(--font-sans);
}
button, input, select, textarea { font: inherit; }
[data-metric] { font-variant-numeric: tabular-nums lining-nums; }

/* §5.4 focus contract — 2px signal + 3px translucent outer ring, visible on every surface */
:focus-visible {
  outline: 2px solid var(--signal-hover);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(52, 200, 132, .28);
  border-radius: 2px;
}

/* §10.1 skip link — first focusable element on every route */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--layer-toast);
  background: var(--action-bg);
  color: var(--action-text);
  font: 500 .9375rem/1 var(--font-sans);
  padding: 14px 22px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link:focus-visible,
.skip-link:focus {
  left: 0;
}
main[id]:focus { outline: none; }

/* §12.2 anchor targets clear the fixed header */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* §6.3 native scrolling behavior */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

/* §6.8 reduced motion — content is never hostage to animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
  [data-motion], [data-reveal], [data-split] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* §5.1 type roles — consumed by the design-system fixture now and by route slices
   as they migrate (Stage 3). Styling is by role, never by heading level. */
.t-masthead { font: 400 clamp(4rem, 16vw, 14.4rem)/.88 var(--font-display); letter-spacing: .003em; text-transform: uppercase; }
.t-h1       { font: 300 clamp(2.25rem, calc(1.6rem + 2.7vw), 4rem)/1.04 var(--font-sans); letter-spacing: -.025em; max-width: 20ch; }
.t-h2       { font: 300 clamp(1.75rem, calc(1.3rem + 1.85vw), 3rem)/1.10 var(--font-sans); letter-spacing: -.02em; max-width: 24ch; }
.t-h3       { font: 400 clamp(1.375rem, calc(1.15rem + .95vw), 2rem)/1.18 var(--font-sans); letter-spacing: -.015em; max-width: 30ch; }
.t-card     { font: 500 clamp(1.125rem, calc(1.03rem + .38vw), 1.375rem)/1.25 var(--font-sans); letter-spacing: -.01em; max-width: 32ch; }
.t-content  { font: 500 1.25rem/1.35 var(--font-sans); letter-spacing: -.005em; max-width: 52ch; }
.t-quote    { font: 300 clamp(1.5rem, calc(1.15rem + 1.45vw), 2.5rem)/1.24 var(--font-sans); letter-spacing: -.02em; max-width: 28ch; }
.t-metric   { font: 300 clamp(2.75rem, calc(1.75rem + 4.1vw), 5.5rem)/.95 var(--font-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
.t-lede     { font: 400 clamp(1.125rem, calc(1.05rem + .33vw), 1.375rem)/1.50 var(--font-sans); max-width: 60ch; }
.t-body-lg  { font: 400 clamp(1.0625rem, calc(1.02rem + .18vw), 1.125rem)/1.60 var(--font-sans); max-width: 64ch; }
.t-body     { font: 400 1rem/1.65 var(--font-sans); max-width: 68ch; }
.t-body-sm  { font: 400 .875rem/1.55 var(--font-sans); max-width: 62ch; }
.t-caption  { font: 400 .8125rem/1.50 var(--font-sans); letter-spacing: .01em; max-width: 55ch; }
.t-eyebrow  { font: 500 .75rem/1.20 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.t-nav      { font: 500 .875rem/1.20 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.t-label    { font: 500 .875rem/1.40 var(--font-sans); letter-spacing: .01em; }

@supports (text-wrap: balance) {
  .t-h1, .t-h2, .t-h3, .t-card { text-wrap: balance; }
  h1, h2, h3 { text-wrap: balance; } /* sitewide widow guard (owner polish pass, 2026-08-09) */
}
@supports (text-wrap: pretty) {
  .t-lede, .t-body-lg, .t-body { text-wrap: pretty; }
}

/* §5.4 canonical controls — consumed by fixture and Stage 3 slices */
.button {
  min-height: 52px;
  padding-inline: 28px;
  border-radius: var(--radius-pill);
  font: 500 .9375rem/1 var(--font-sans);
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-wrap: balance;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.button--primary { background: var(--action-bg); color: var(--action-text); }
.button--secondary { background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary); }
.button--compact { min-height: 44px; padding-inline: 20px; font-size: .875rem; }
@media (hover: hover) and (pointer: fine) {
  .button--primary:hover { background: #FFFFFF; }
  .button--secondary:hover { border-color: var(--text-primary); }
}
.field {
  min-height: 52px;
  width: 100%;
  border: 1px solid rgba(234, 238, 245, .24);
  background: transparent;
  border-radius: var(--radius-card);
  padding: 14px 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.field:focus-visible { border-color: var(--signal-hover); }
.field[aria-invalid="true"] { border-color: var(--error); }