/* Base: fonts, reset, typography, focus. Colours come from tokens.css only. */
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h-solid) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--heading); text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--track-display); }
h2 { font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-heading); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.35; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }
strong, b { font-weight: 700; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--link-hover); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--sky); color: var(--navy); }

.skip-link {
  position: fixed; left: var(--sp-4); top: var(--sp-4); z-index: calc(var(--z-loader) + 1);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-capsule);
  background: var(--navy); color: var(--white); font-weight: 700; text-decoration: none;
  transform: translateY(-200%); transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: none; color: var(--white); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Dark surfaces: anything inside .on-dark reads white on navy, and focus turns Sky (8.6:1). */
.on-dark {
  --text: var(--white);
  --text-muted: var(--navy-text-muted);
  --heading: var(--white);
  --link: var(--sky);
  --link-hover: var(--white);
  --border: var(--navy-line);
  --focus: var(--sky);
  color: var(--text);
}

.mono { font-family: var(--font-mono); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-muted); max-width: 60ch; }
.on-dark .lead { color: var(--navy-text-muted); }
.display {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display);
  line-height: 1.02; letter-spacing: var(--track-display); color: var(--heading);
}
.measure { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose ul { padding-left: 1.2em; }

/* Placeholders are visible on purpose (see TODO.md). */
.placeholder {
  font-family: var(--font-mono); font-size: 0.9em; padding: 0.05em 0.35em; border-radius: 4px;
  background: var(--cloud); color: var(--navy); border: 1px dashed var(--blue);
}
.on-dark .placeholder { background: var(--navy-raised); color: var(--white); border-color: var(--sky); }

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