/* tokens.css - dogfoods DESIGN_SYSTEM.md (academic, calm, teal accent, no AI-slop). */
:root {
  --color-bg: #f8f9fb;          /* off-white */
  --color-surface: #ffffff;
  --color-text: #1a1d23;        /* off-black */
  --color-text-muted: #5b6470;
  --color-border: #e6e8ec;
  --color-primary: #2f6f6a;     /* deep teal: serious, not AI-purple */
  --color-primary-hover: #275c58;
  --color-success: #1f7a44;
  --color-warning: #9a6b00;
  --color-danger: #b3261e;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s24:96px;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --elev-1: 0 1px 2px rgb(0 0 0/.05), 0 1px 3px rgb(0 0 0/.08);
  --maxw: 1000px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:#0f1216; --color-surface:#161a20; --color-text:#e7e9ec; --color-text-muted:#9aa2ad;
    --color-border:#283039; --color-primary:#5fb3ab; --color-primary-hover:#79c4bd;
    --color-success:#54c98a; --color-warning:#e0b252;
    --elev-1: 0 1px 2px rgb(0 0 0/.5);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--font-sans); color:var(--color-text); background:var(--color-bg); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--color-primary); text-decoration:none; }
a:hover { color:var(--color-primary-hover); text-decoration:underline; }
.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s6); }
header.site { position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--color-bg) 90%,transparent); backdrop-filter:blur(6px); border-bottom:1px solid var(--color-border); }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; height:60px; gap:var(--s4); }
.brand { font-weight:700; letter-spacing:-.01em; color:var(--color-text); }
.brand span { color:var(--color-primary); }
.nav { display:flex; gap:var(--s6); font-size:.9rem; }
.nav a { color:var(--color-text-muted); } .nav a:hover { color:var(--color-text); text-decoration:none; }
.btn { display:inline-flex; align-items:center; gap:var(--s2); font-weight:600; font-size:.9rem; padding:var(--s3) var(--s4); border:1px solid var(--color-border); border-radius:var(--r-md); background:var(--color-surface); color:var(--color-text); }
.btn:hover { border-color:var(--color-primary); text-decoration:none; }
.btn-primary { background:var(--color-primary); color:#fff; border-color:transparent; }
.btn-primary:hover { background:var(--color-primary-hover); color:#fff; }
.hero { padding-block:var(--s24) var(--s16); }
.hero h1 { font-size:clamp(2rem,5vw,2.75rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 var(--s4); max-width:20ch; }
.hero p { font-size:1.2rem; color:var(--color-text-muted); max-width:62ch; margin:0 0 var(--s8); }
.hero .actions { display:flex; gap:var(--s3); flex-wrap:wrap; }
section { padding-block:var(--s16); border-top:1px solid var(--color-border); }
.eyebrow { font-size:.85rem; font-weight:600; color:var(--color-primary); margin:0 0 var(--s2); }
h2 { font-size:1.9rem; letter-spacing:-.01em; margin:0 0 var(--s6); }
h3 { font-size:1.1rem; margin:0 0 var(--s2); }
.muted { color:var(--color-text-muted); }
.docs { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.doc { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--r-lg); padding:var(--s6); }
.doc code { font-family:var(--font-mono); font-size:.85rem; color:var(--color-text); }
.doc p { margin:var(--s2) 0 0; color:var(--color-text-muted); font-size:.95rem; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); }
ul.clean { margin:0; padding-left:1.1rem; } ul.clean li { margin-bottom:var(--s2); }
.callout { background:var(--color-surface); border:1px solid var(--color-border); border-left:3px solid var(--color-primary); border-radius:var(--r-md); padding:var(--s4) var(--s6); }
footer { border-top:1px solid var(--color-border); padding-block:var(--s8); color:var(--color-text-muted); font-size:.9rem; }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s3); }
@media (max-width:720px){ .docs,.cols{ grid-template-columns:1fr; } .nav .hide-sm{ display:none; } .hero{ padding-block:var(--s16) var(--s12); } }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }