/* ============================================================
   eaacompliance.org — design tokens (locked with the approved
   Phase 1 homepage preview, 12 Aug 2026). Single source of truth:
   no hex values or font stacks hard-coded anywhere else (NORMS §4).
   ============================================================ */
:root {
  /* palette — "the evidence file" */
  --paper:      #F7F8FA;   /* cool document white */
  --paper2:     #EEF1F5;
  --card:       #FFFFFF;
  --ink:        #0F1C2E;   /* near-navy black */
  --slate:      #44536A;   /* muted text */
  --line:       #C9D2DE;   /* hairlines */
  --line-soft:  #DDE4EC;
  --union:      #1B3FA0;   /* EU working blue — links, active states */
  --deep:       #122B6E;   /* union deep — cover, masthead, tiles */
  --edge:#0B1730;        /* deepest navy — hero gradients, code blocks, reveal panels */
  --navy-edge:  #0B1730;   /* topstrip, seal field */
  --gold:       #C99700;   /* seal gold — accents, focus, warnings */
  --gold-ink:   #7A5B00;
  --pass:       #1A7A4A;   /* verified green */
  --pass-soft:  #DDF0E5;
  --fail:       #B42318;   /* breach red */
  --fail-soft:  #F7E1DF;
  --amber-soft: #F6ECD4;
  --steel:      #C7D3E3;
  --hatch:      #E4E9F0;

  /* type — one grotesque voice. The evidence register is carried by tracked
     uppercase labels and tabular lining figures, NOT by a monospace face
     (rev. 17 Aug 2026: monospace read as "developer tool" on commercial
     surfaces). --code stays a true monospace and is used ONLY where the
     content is literally code: markup snippets, CSS selectors, DNS records. */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: var(--sans);
  --code: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

  /* layout */
  --max:  1120px;
  --rail: 76px;
}

/* base floor every page inherits */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--union); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--deep); }

/* the gold focus ring is brand, not obligation */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums; }
.code  { font-family: var(--code); }
.muted { color: var(--slate); }
.measure { max-width: 46em; }

/* skip link — required on every page (NORMS §3) */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--ink); color: #fff; padding: .6em 1em; border-radius: 4px;
  font-family: var(--mono); font-size: .85rem; text-decoration: none;
  transition: top .15s;
}
.skip:focus { top: 12px; }