/* tokens.css — every visual variable lives here. Components use tokens
   only; hardcoded colors/sizes in templates are a bug. */

:root {
  /* type */
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-0: 12px;
  --fs-1: 14px;
  --fs-2: 16px;
  --fs-3: 22px;
  --fs-4: 32px;

  /* space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;

  --radius: 4px;
  --maxw: 1080px;

  /* color — dark is the default */
  --bg: #0d1117;
  --bg-2: #161b22;
  --bg-3: #1f2630;
  --fg: #e6edf3;
  --fg-dim: #8b949e;
  --border: #30363d;
  --accent: #4fd1b3;
  --accent-dim: rgba(79, 209, 179, 0.15);
  --danger: #f85149;
}

[data-theme="light"] {
  --bg: #ffffff;
  --bg-2: #f6f8fa;
  --bg-3: #eaeef2;
  --fg: #1f2328;
  --fg-dim: #59636e;
  --border: #d1d9e0;
  --accent: #0f766e;
  --accent-dim: rgba(15, 118, 110, 0.12);
  --danger: #d1242f;
}