/* Shared monochrome design system. Colors and spacing have one source. */
:root {
  --bg: #f4f5f7;
  --fg: #121316;
  --surface: #e9eaec;
  --muted: #5b5d62;
  --line: #c5c6c9;
  --card: var(--bg);
  --accent: var(--fg);
  --inverse: var(--bg);
  --subtle: var(--surface);
  --soft: var(--surface);
  --radius: 0;
  --font-sans: Inter, Arial, sans-serif;
  --section-space: 88px;
  --intro-space: 80px;
  --intro-gap: 44px;
  --page-width: 1280px;
  --gutter: 40px;
}
html[data-theme="dark"] {
  --bg: #121316;
  --fg: #f4f5f7;
  --surface: #1b1c1f;
  --muted: #b1b3b8;
  --line: #3b3d42;
}
body {
  background: var(--bg);
  color: var(--fg);
}
@media (max-width: 1024px) {
  :root {
    --section-space: 64px;
    --intro-space: 64px;
    --intro-gap: 36px;
    --gutter: 28px;
  }
}
@media (max-width: 600px) {
  :root {
    --section-space: 48px;
    --intro-space: 48px;
    --intro-gap: 28px;
    --gutter: 20px;
  }
}