:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-accent: #3355ff;
  --font-sans: 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,
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  margin: 0;
}

/* :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;
}