/* ==========================================================================
   base.css — Reset, fonts, document & element defaults
   Builds on tokens.css. Sets the typographic baseline; component-specific
   styling lives in components.css / layout.css.
   ========================================================================== */

/* ---- Self-hosted fonts -------------------------------------------------
   No third-party font requests: the Google Fonts CDN leaks visitor IPs and is
   not GDPR-compliant, so the OFL files are served from our own origin. Archivo
   is one variable file carrying BOTH a weight (100–900) and a width (62–125%)
   axis — width 125% is the Expanded "fills the frame" display cut. Space Mono
   ships as two static cuts. License text sits beside the files in /fonts.
------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

* { margin: 0; }

/* 100% honours the user's browser font-size setting; rem tokens scale from it. */
html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.4rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-grotesk);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

::selection {
  background: var(--c-signal);
  color: var(--c-white);
}

/* ---- Headings adopt the display grotesque ----------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* ---- Accessibility: visible keyboard focus ---------------------------- */
/* Mouse users see nothing; keyboard users get a clear signal-red ring on every
   interactive element. (The reset never removes default outlines blindly.) */
:focus-visible {
  outline: 2px solid var(--c-signal);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link — first focusable element; sits off-screen until focused. */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  transition: top var(--transition);
}
.skip-link:focus-visible {
  top: var(--space-4);
  outline-offset: 2px;
}

/* Visually-hidden, but present for screen readers (form labels). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

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