/* Design tokens from the Claude Design handoff (design/batch1/README.md). One source for every page. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Instrument+Sans:wght@400..700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --paper: #F5F3EE; --card: #FFFFFF; --sunken: #ECE9E2; --line: #E2DED5;
  --ink: #1E1C19; --ink-2: #4A4741; --muted: #6B675F;
  --cobalt: #2E55D9; --cobalt-deep: #1F3DA6; --cobalt-glow: #4467E3; --cobalt-tint: #E3E9FB; --on-cobalt: #DCE4FF;
  --soon-ink: #8A4B00; --soon-bg: #FBEBD0;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 32px; --s7: 48px;
  --r-tag: 6px; --r-sm: 12px; --r-btn: 16px; --r-card: 18px; --r-hero: 24px; --r-pill: 999px;
  --shadow-card: 0 1px 0 rgba(0,0,0,.04), 0 10px 22px -14px rgba(30,28,25,.25);
  --shadow-press: 0 4px 0 var(--cobalt-deep);
  --ease-reveal: cubic-bezier(.2,.8,.2,1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 400 15px/1.45 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .2s !important; } }