/* Shared by every site page. Tokens are the migration report's own (backend/src/lib/report-html.ts); the site is light only. */
:root {
  --paper: #fafaf8; --surface: #ffffff; --sunken: #f3f3ef; --ink: #16161a; --body: #4a4a52; --muted: #666670; --faint: #9a9aa3;
  --line: rgba(22, 22, 26, .10); --line-strong: rgba(22, 22, 26, .20);
  --accent: #d08700; --accent-ink: #8f5c00; --accent-soft: #fbf1dc;
  --ok: #15803d; --ok-soft: #e8f6ec; --bad: #b42318; --bad-soft: #fdecea;
  /* Solid buttons carry white text: this amber keeps 4.5:1 contrast with white. */
  --cta: #a86800; --cta-hover: #935b00;
  --shadow: 0 1px 2px rgba(22, 22, 26, .04), 0 12px 32px -12px rgba(22, 22, 26, .18);
  --shadow-lg: 0 2px 4px rgba(22, 22, 26, .04), 0 40px 80px -24px rgba(22, 22, 26, .28);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px; --max: 1160px; --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--body); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
code, pre, .mono { font-family: var(--mono); }
code { font-size: .88em; color: var(--ink); background: var(--sunken); border: 1px solid var(--line); padding: .08em .38em; border-radius: 6px; }
strong { color: var(--ink); font-weight: 600; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 12px; top: -48px; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.topbar.scrolled, .topbar.solid { border-bottom-color: var(--line); background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.topbar .wrap { display: flex; align-items: center; gap: 14px; height: 64px; }
.brand { font: 700 15px/1 var(--mono); color: var(--ink); text-decoration: none; letter-spacing: -.01em; white-space: nowrap; border-radius: 6px; }
.brand:hover { color: var(--ink); }
.brand .slashes { color: var(--accent); margin-right: 4px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { position: relative; font: 600 13.5px/1 var(--mono); color: var(--body); text-decoration: none; padding: 10px 14px; border-radius: 999px; transition: color .2s, background .2s; }
.nav a:hover { color: var(--ink); background: var(--sunken); }
.nav a[aria-current] { color: var(--ink); background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); }


/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 14.5px/1 var(--mono); text-decoration: none; padding: 15px 22px; border-radius: 999px; border: 0; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, background .25s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--cta); color: #fff; box-shadow: 0 10px 30px -10px rgba(168, 104, 0, .55); }
.btn-primary:hover { background: var(--cta-hover); color: #fff; }
.btn-ghost { color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); }
.btn-ghost:hover { color: var(--ink); }
.btn svg { width: 16px; height: 16px; flex: none; }

/* Section typography */
.kicker { margin: 0 0 14px; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.kicker .num { color: var(--accent-ink); margin-right: 10px; }
h2 { margin: 0; max-width: 22ch; font: 700 clamp(30px, 4.4vw, 52px)/1.08 var(--mono); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
h2 em, h1 em { font-style: normal; color: var(--accent); }
.section-lede { margin: 20px 0 0; max-width: 700px; font-size: 18px; color: var(--body); text-wrap: pretty; }
h3 { margin: 0; font: 700 17px/1.35 var(--mono); letter-spacing: -.02em; color: var(--ink); }
.note { margin: 22px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--surface); font-size: 14.5px; }

/* Footer */
footer { margin-top: clamp(80px, 11vw, 140px); border-top: 1px solid var(--line); padding: 32px 0 44px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; font: 500 13px/1.6 var(--mono); color: var(--muted); }
footer a { color: var(--ink); }

/* Scroll reveal */
.js .reveal { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }

@media (max-width: 560px) {
  .topbar .wrap { gap: 8px; }
  .brand { font-size: 14px; }
  .nav a { padding: 9px 10px; font-size: 13px; }
  h2 { font-size: 26px; letter-spacing: -.04em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; filter: none; transform: none; transition: none; }
}