:root {
  --bg: #f8f7f4;
  --surface: #ffffff;
  --text: #1f1f1f;
  --muted: #5a5a5a;
  --border: #e2e0da;
  --link: #1a5fb4;
  --code-bg: #f2f1ee;
  --callout-info: #e8f0ff;
  --callout-warn: #fff4da;
  --callout-danger: #ffe3e3;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --font-sans: system-ui, -apple-system, "Segoe UI", "Noto Sans", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "Fira Code", Consolas, "Courier New", monospace;
  --content-width: 820px;
  --line-height: 1.7;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: radial-gradient(circle at top left, #fdfbf7 0%, #f8f7f4 50%, #f4f2ee 100%);
  line-height: var(--line-height);
}

::selection { background: #cfe0ff; }

a { color: var(--link); }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid #6aa5ff;
  outline-offset: 3px;
  border-radius: 4px;
}