/*
  Ethioneural base styles. Generated by scripts/build_tokens.py from tokens/tokens.json. Do not edit by hand.
  Load after tokens.css. Each rule applies one brand rule; drop what the project does not need.
*/
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Links on paper are ink with a 2px gold underline: gold text on white fails contrast. */
a {
  color: var(--color-ink);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-accent);
}
a:hover {
  text-decoration-color: currentColor;
}

/* Focus is a 2px ink outline, never gold, which fails the 3:1 non-text floor on white. */
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

::selection {
  background: var(--color-selection);
  color: var(--color-ink);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
}

code, pre, kbd {
  font-family: var(--font-mono);
}
pre {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 1rem;
  overflow-x: auto;
}

/* Primary action: a gold fill behind ink text, 4px radius, no shadow. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: 600 1rem/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.btn-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  font: 600 1rem/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}

/* Selected states: gold fill, ink text. */
[aria-selected="true"], [aria-current="page"].chip, .is-selected {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* The black band: white text, gold headline. Links and focus switch to on-band. */
.band {
  background: var(--color-band);
  color: var(--color-on-band);
}
.band h1, .band h2 {
  color: var(--color-accent);
}
.band p.muted, .band .muted {
  color: var(--color-band-muted);
}
.band a {
  color: var(--color-on-band);
}
.band :focus-visible {
  outline-color: var(--color-on-band);
}

.surface {
  background: var(--color-surface);
}
.muted {
  color: var(--color-ink-muted);
}
.measure {
  max-width: var(--size-measure);
}
.page {
  max-width: var(--size-page);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

/* Ethiopic text (Amharic, Tigrinya, Ge'ez) needs its own face: Sora and Plex have no Ethiopic glyphs. */
:lang(am), :lang(ti), :lang(gez), .ethiopic {
  font-family: "Noto Sans Ethiopic", var(--font-sans);
  line-height: 1.8;
}

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