:root {
  --color-bg:      hsl(0, 0%, 100%);
  --color-fg:      hsl(0, 0%, 6%);
  --color-muted:   hsl(0, 0%, 35%);
  --color-faint:   hsl(0, 0%, 50%);
  --color-rule:    hsl(0, 0%, 90%);
  --color-code-bg: hsl(0, 0%, 97%);
  --color-accent:  hsl(0, 30%, 45%);
  --color-fail:    #d97757;
  --font-sans:     'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --font-display:  'Inter', system-ui, sans-serif;
  --type-base:     15px;
  --type-ratio:    1.25;
  --space-base:    4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg); color: var(--color-fg);
  font-family: var(--font-sans); font-size: var(--type-base); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

header.site { border-bottom: 1px solid var(--color-rule); padding: 20px 0; margin-bottom: 48px; }
header.site .row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
header.site .brand { font-family: var(--font-display); font-size: 18.8px; font-weight: 600; color: var(--color-fg); text-decoration: none; }
header.site nav { display: flex; gap: 28px; font-family: var(--font-display); font-size: 12.8px; }
header.site nav a { color: var(--color-muted); text-decoration: none; padding: 4px 0; }
header.site nav a:hover { color: var(--color-fg); }
header.site nav a.active { color: var(--color-fg); border-bottom: 1px solid var(--color-fg); }

main { padding-bottom: 64px; }
.eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-faint); margin: 0 0 12px; }

h1 { font-family: var(--font-display); font-size: 29.3px; line-height: 1.2; font-weight: 600; margin: 0 0 20px; letter-spacing: -0.01em; }
[data-page="design"] h1, [data-page="manifold"] h1, [data-page="gates"] h1 { max-width: none; }
[data-page="design"] .body, [data-page="manifold"] .body, [data-page="gates"] .body { max-width: none; }

h2 { font-family: var(--font-display); font-size: 23.4px; line-height: 1.3; font-weight: 600; margin: 48px 0 16px; }
p { margin: 0 0 16px; max-width: 720px; }
p.lede { font-size: 18.8px; color: var(--color-muted); max-width: 720px; }
.body { color: var(--color-muted); }

a { color: var(--color-fg); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--color-accent); }

code { font-family: var(--font-mono); font-size: 0.92em; background: var(--color-code-bg); padding: 1px 4px; border-radius: 3px; }

pre.cmd { background: var(--color-code-bg); border: 1px solid var(--color-rule); border-radius: 4px; padding: 16px 20px; overflow-x: auto; font-family: var(--font-mono); font-size: 13.8px; line-height: 1.7; color: var(--color-fg); margin: 0 0 24px; max-width: 720px; }
pre.cmd code { background: none; padding: 0; font-size: inherit; }
pre.cmd .cmt { color: var(--color-faint); }

.meta-strip, .design-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; margin: 32px 0 48px; font-size: 12.8px; max-width: 760px; }
@media (min-width: 760px) { .meta-strip, .design-meta { grid-template-columns: repeat(4, 1fr); } }
.meta-strip dt, .design-meta dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-faint); margin: 0; }
.meta-strip dd, .design-meta dd { margin: 4px 0 0; color: var(--color-fg); }
.design-meta { max-width: none; }

table { width: 100%; border-collapse: collapse; font-size: 12.8px; margin: 0 0 32px; max-width: none; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--color-rule); vertical-align: top; }
th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-faint); font-weight: 400; border-bottom-color: var(--color-fg); }

.theme-block { border: 1px solid var(--color-rule); border-radius: 4px; margin: 16px 0; overflow: hidden; }
.theme-label { font-family: var(--font-mono); font-size: 11.2px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-faint); padding: 12px 16px; border-bottom: 1px solid var(--color-rule); background: var(--color-code-bg); }
.theme-label code { background: none; padding: 0; }
.theme-label strong { color: var(--color-fg); margin-right: 4px; }
.theme-block.theme-fixed { background: #fff; border-color: #e5e5e5; }
.theme-block.theme-fixed .theme-label { background: #f7f7f7; border-bottom-color: #e5e5e5; color: #717171; }
.theme-block.theme-fixed .theme-label strong { color: #0a0a0a; }
.theme-block.theme-fixed .token-name { color: #0a0a0a; }
.theme-block.theme-fixed .token-hex, .theme-block.theme-fixed .token-ratio { color: #717171; }
.theme-block.theme-fixed .token-row { background: #fff; }
.theme-block.theme-fixed .token-grid { background: #e5e5e5; }

.token-grid { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--color-rule); }
@media (min-width: 700px) { .token-grid { grid-template-columns: 1fr 1fr; } }
.token-row { display: grid; grid-template-columns: 32px 1fr 90px 90px; align-items: center; gap: 12px; padding: 8px 12px; background: var(--color-bg); font-size: 12.8px; }
.token-swatch { width: 24px; height: 24px; border-radius: 3px; border: 1px solid var(--color-rule); }
.token-name { font-family: var(--font-mono); font-size: 11.7px; color: var(--color-fg); }
.token-hex { font-family: var(--font-mono); font-size: 10.8px; color: var(--color-faint); text-align: right; }
.token-ratio { font-family: var(--font-mono); font-size: 10.8px; text-align: right; padding: 1px 4px; border-radius: 3px; border: 1px solid var(--color-rule); }
.token-ratio.pass { color: var(--color-fg); }
.token-ratio.fail { color: var(--color-fail); border-color: var(--color-fail); }

.type-scale { border: 1px solid var(--color-rule); border-radius: 4px; overflow: hidden; }
.type-row { display: grid; grid-template-columns: 90px 1fr 130px; align-items: baseline; gap: 16px; padding: 8px 16px; border-bottom: 1px solid var(--color-rule); font-size: 12.8px; }
.type-row:last-child { border-bottom: none; }
.type-label { font-family: var(--font-mono); font-size: 10.8px; color: var(--color-faint); }
.type-sample { color: var(--color-fg); line-height: 1.2; }
.type-meta { font-family: var(--font-mono); font-size: 10.8px; color: var(--color-faint); text-align: right; }

.scale-table .scale-kind { font-family: var(--font-mono); font-size: 10.8px; color: var(--color-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.scale-table .scale-name { font-family: var(--font-mono); font-size: 11.7px; color: var(--color-fg); }
.scale-table .scale-value { font-family: var(--font-mono); font-size: 11.7px; color: var(--color-muted); }
.scale-table .scale-desc { color: var(--color-muted); }

.gate-badge { display: inline-block; font-family: var(--font-mono); font-size: 9.8px; padding: 2px 4px; border-radius: 3px; border: 1px solid var(--color-rule); letter-spacing: 0.05em; }
.gate-badge.gate-strict { color: var(--color-fg); border-color: var(--color-fg); }
.gate-badge.gate-css, .gate-badge.gate-component { color: var(--color-fg); }
.gate-badge.gate-advisory { color: var(--color-muted); }
.gate-badge.gate-planned { color: var(--color-faint); border-style: dashed; }

.card-grid { list-style: none; padding: 0; margin: 16px 0 32px; display: grid; grid-template-columns: 1fr; gap: 12px; max-width: none; }
@media (min-width: 720px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card { border: 1px solid var(--color-rule); border-radius: 5px; padding: 12px 16px; background: var(--color-code-bg); }
.card-planned { border-style: dashed; background: transparent; }
.card-name { margin: 0 0 4px; font-size: 13.8px; }
.card-name code { background: none; padding: 0; color: var(--color-fg); }
.card-tags { margin: 0 0 4px; font-family: var(--font-mono); font-size: 11.7px; color: var(--color-faint); }
.card-use { margin: 0; font-size: 12.8px; line-height: 1.45; color: var(--color-muted); }

footer.site { border-top: 1px solid var(--color-rule); padding: 32px 0; margin-top: 64px; color: var(--color-muted); font-size: 12.8px; }
footer.site .meta { color: var(--color-faint); font-size: 11.7px; max-width: 720px; }