/* Base layer (DESIGN_SPEC.md §Typography, §CSS architecture): self-hosted fonts, a small
   reset, the type system, and prose defaults. Loads after tokens.css, before components.css. */

/* Self-hosted fonts — no CDN (LCP < 2.0s NFR + privacy). font-display: swap so text paints
   immediately in the fallback and swaps when the web font arrives. Both faces are variable
   (single file covers every weight the system uses), latin subset. */
@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/static/fonts/gabarito-var.woff2") format("woff2");
}
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/spline-sans-mono-var.woff2") format("woff2");
}

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: 1.5;
  /* Long words / URLs in prose must never force a horizontal scrollbar. */
  overflow-wrap: break-word;
}

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

svg {
  fill: currentColor;
}

/* Type system (DESIGN_SPEC §Typography). Uppercase is demoted from a voice to a label: only
   field labels and micro-tags shout; every heading is sentence case. Headings carry weight
   (Gabarito 800) and slightly tight tracking instead of caps. The h1's single scarce accent,
   the highlighter swipe, lives on .hero h1 in pages.css. One step up at >=768px. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-ui);
  line-height: 1.1;
}

h2,
h3,
h4 {
  font-weight: 800;
  letter-spacing: -.01em;
}

h1 {
  font-weight: 800;
  font-size: var(--text-xl);
  line-height: 1.14;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h2 {
  font-size: var(--text-lg);
}

h3 {
  font-size: var(--text-base);
}

@media (min-width: 768px) {
  h1 {
    font-size: var(--text-2xl);
  }

  h2 {
    font-size: var(--text-xl);
  }
}

p {
  /* Uniform paragraph rhythm; the design system owns spacing, not ad-hoc margins. */
  margin-block: 0;
}

/* Links are the editorial second voice (teal). Chrome surfaces (header, footer, chips,
   buttons) override this with their own colors in components.css. */
a {
  color: var(--accent-2);
  text-underline-offset: 2px;
}

/* Numbers are always mono with tabular figures, wherever they appear. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Focus is always visible: 3px ink outline, offset 2px (WCAG 2.1 AA). */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* Prose: sentence-case body content constrained to a readable measure. */
.prose {
  max-width: var(--measure);
}

.prose p + p,
.prose h2,
.prose h3 {
  margin-top: var(--sp-4);
}

/* Screen-reader-only helper for icon-button labels and skip links. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}