/* ==========================================================================
   Reset + base typography. Modernized per-element setup.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--text-1);
  background: var(--surface-0);
  min-height: 100vh;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

::selection { background: var(--accent-faint); color: var(--text-1); }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--text-4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent); color: var(--text-1); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}
/* Programmatic focus targets (route changes focus main for SR users)
   should not show a focus ring; they are not user-driven. */
[tabindex="-1"]:focus-visible { box-shadow: none; }
main:focus, article:focus { outline: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  margin: 0 0 .5em;
  letter-spacing: -.012em;
  line-height: 1.18;
  font-weight: 600;
  color: var(--text-1);
  text-wrap: balance;
}
h1 { font-size: var(--fs-800); font-weight: 650; letter-spacing: -.022em; }
h2 { font-size: var(--fs-600); }
h3 { font-size: var(--fs-500); }
h4 { font-size: var(--fs-400); }
h5 { font-size: var(--fs-300); }
h6 { font-size: var(--fs-200); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }

p { margin: 0 0 1em; max-width: 70ch; }

/* Prose surfaces */
.prose {
  font-size: var(--fs-300);
  line-height: 1.65;
  color: var(--text-2);
  max-width: 70ch;
}
.prose strong { color: var(--text-1); font-weight: 600; }
.prose em { color: var(--text-1); }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose ul li, .prose ol li { margin: .25em 0; }
.prose hr { border: 0; border-top: 1px solid var(--border-1); margin: 2.5em 0; }

/* Code */
code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-feature-settings: 'ss02';
}
:not(pre) > code {
  font-size: .9em;
  padding: .15em .4em;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 4px;
  color: var(--text-1);
}
pre {
  font-size: .88rem;
  line-height: 1.6;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1rem 0;
  color: var(--text-2);
}
pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* Numerics */
.tabular { font-variant-numeric: tabular-nums; }

/* Visually hidden */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute; top: -50px; left: 16px;
  background: var(--accent);
  color: var(--surface-0);
  padding: .5rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

hr { border: 0; border-top: 1px solid var(--border-1); margin: 2rem 0; }

/* Selection cursor for the System Map */
canvas { display: block; outline: none; }

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

/* ----- Syntax highlighting tokens (consumed by js/highlight.js output) ----- */
pre { position: relative; }
pre[data-lang]:not([data-lang="plain"])::before {
  content: attr(data-lang);
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4);
  font-family: var(--font-mono);
  pointer-events: none;
}
.hl-comment { color: var(--text-4); font-style: italic; }
.hl-string  { color: oklch(72% 0.14 140); }
.hl-number  { color: oklch(75% 0.13 50); }
.hl-keyword { color: oklch(72% 0.14 290); font-weight: 500; }
.hl-fn      { color: oklch(72% 0.13 230); }
.hl-type    { color: oklch(72% 0.14 200); }
.hl-punct   { color: var(--text-3); }
.hl-key     { color: oklch(72% 0.14 25); }

[data-theme="light"] .hl-comment { color: #6B6B73; }
[data-theme="light"] .hl-string  { color: #047857; }
[data-theme="light"] .hl-number  { color: #B45309; }
[data-theme="light"] .hl-keyword { color: #6D28D9; }
[data-theme="light"] .hl-fn      { color: #1D4ED8; }
[data-theme="light"] .hl-type    { color: #0E7490; }
[data-theme="light"] .hl-punct   { color: #4F4F58; }
[data-theme="light"] .hl-key     { color: #B91C1C; }