@import "tailwindcss";

@theme {
  --color-ink: #0f1015;
  --color-ink-dim: #404252;
  --color-paper: #f7f6f3;
  --color-paper-dim: #e8e6e0;
  --color-accent: #4338ca;
  --color-accent-soft: #e0e7ff;
  --color-good: #16a34a;
  --color-warn: #d97706;
  --color-bad: #dc2626;
  --font-display: ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}
code, pre { font-family: var(--font-mono); }
/* Must live in @layer base — unlayered rules ALWAYS beat layered
   ones in CSS cascade, regardless of specificity. Tailwind utilities
   live in @layer utilities (declared after base), so utility classes
   like text-white now correctly win over this default link color. */
@layer base {
  a { color: var(--color-accent); }
  a:hover { text-decoration: underline; }
}

.prose { max-width: 70ch; line-height: 1.65; }
.prose h2 { font-size: 1.5rem; margin-top: 2.5rem; font-weight: 700; }
.prose h3 { font-size: 1.125rem; margin-top: 1.5rem; font-weight: 600; }
.prose p { margin: 1rem 0; }
.prose code { background: var(--color-paper-dim); padding: 0 4px; border-radius: 3px; }
.prose pre {
  background: var(--color-ink); color: #f1f1f3;
  padding: 1.25rem; border-radius: 8px;
  overflow-x: auto; font-size: 13px; line-height: 1.55;
}
.prose pre code { background: none; padding: 0; color: inherit; }