:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-accent: #3355ff;
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --content-width: 42rem;

  --callout-info: #3355ff;
  --callout-warning: #b45309;
  --callout-danger: #dc2626;
  --callout-success: #16a34a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111214;
    --color-text: #eaeaea;
    /* #3355ff (the light-mode value) is only 3.47:1 against this
       background — fails WCAG AA's 4.5:1 minimum for normal text. Reusing
       --callout-info's existing dark-mode blue (already vetted, 7.07:1)
       rather than picking a third color for the same job. */
    --color-accent: #7c9aff;

    --callout-info: #7c9aff;
    --callout-warning: #f0a828;
    --callout-danger: #f16565;
    --callout-success: #4ade80;
  }
}

html {
  /* Reserves the scrollbar gutter on every page, whether or not that
     page's content is actually tall enough to scroll — without this, a
     shorter page (no scrollbar) is a few pixels wider than a taller one
     (scrollbar present), and the centered header (margin: 0 auto) visibly
     shifts by that amount when navigating between them. */
  scrollbar-gutter: stable;
}

html,
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

/* Every element browsers render bold by default, restyled to this site's
   deliberately subtler weight (600, not the standard 700) — one rule
   here rather than scattered per-component overrides, so a future
   bold-by-default element doesn't need rediscovering this. A
   per-deployment styling choice, not a Carapace default forced on every
   adopter: site/config.ts's FONTS only fetches weight 600 (not 700) for
   exactly this reason — an adopter who wants standard bold restores 700
   in both places. Without this, the browser would request 700 by
   default, not find it, and silently synthetic-embolden the 600 file
   instead of using it cleanly. */
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
th,
.site-header a {
  font-weight: 600;
}

/* :focus-visible (not :focus) so mouse clicks don't get a visible ring,
   only keyboard/assistive-tech navigation does — the standard modern
   pattern, not a compromise. Every interactive element in this site is a
   plain <a>, so one rule covers all of them. */
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-bg);
  color: var(--color-text);
  padding: 0.75rem 1rem;
  z-index: 100;
}

.skip-link:focus-visible {
  left: 0.5rem;
  top: 0.5rem;
}

/* Screen-reader-only text — visible content stays visual-only (e.g. a
   placeholder), the accessible name still needs a real associated label. */
.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;
}