/* Design tokens: colors, typography, radii, shadows */
:root{
  /* Light */
  --bg:#ffffff;
  --fg:#0f1115;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#0f1115;
  --card:#fafafa;

  --radius:16px;
  --radius-lg:18px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple SD Gothic Neo", sans-serif;

  --h1: clamp(28px, 4vw, 34px);
  --h2: clamp(22px, 3vw, 28px);
  --h3: clamp(18px, 2.4vw, 22px);
  --body: 16px;
}

[data-theme="dark"]{
  --bg:#0b0d12;
  --fg:#e6e7eb;
  --muted:#9aa2b2;
  --line:#1b1f29;
  --accent:#ffffff;
  --card:#10131a;
  --shadow: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.35);
}

/* System hint */
@media (prefers-color-scheme: dark){
  :root{ color-scheme: light dark; }
}