/*
 * Docs page: the layout is docs.html's; the palette is the shared OMA theme (themes.css), which
 * docs.html aliases onto its own --bg / --ink / --accent names. This sheet only shapes the chrome.
 */
body { background:var(--bg); color:var(--ink); }
h1,h2 { font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-tracking); }
.nav { top:12px; background:transparent; border:0; backdrop-filter:none; }
.nav .wrap { height:64px; padding:0 22px; border:1px solid var(--line); border-radius:var(--radius-button); background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(12px); }
.brand { color:var(--ink); font:700 24px/1 var(--font-display); letter-spacing:var(--display-tracking); }
.brand::after { content:"."; color:var(--primary); }
.nav-links { gap:24px; }
.nav-links a { color:var(--ink); }
.page { padding-top:64px; }
.title h1 { max-width:780px; font-size:clamp(3.2rem,6vw,6rem); line-height:.92; color:var(--heading); }
section.doc > h2 { color:var(--heading); }
.eyebrow { color:var(--accent); font-family:var(--font-mono); }
.btn { border-radius:var(--radius-button); }
.btn.primary { color:var(--primary-foreground); background:var(--primary); border-color:var(--primary); }
.toc a.on { border-color:var(--accent); }
.callout { border-radius:0 var(--radius-md) var(--radius-md) 0; }
.tbl,.tool,pre { border-radius:var(--radius-lg); }
.tool { box-shadow:none; }
.chip,.tone { border-radius:var(--radius-sm); }
footer b { font-family:var(--font-display); }

@media(max-width:760px){.nav .wrap{padding:0 16px}.nav-links{display:flex!important;font-size:13px;gap:14px}.page{padding-top:40px}}