/* The design tokens: one source for the builder app and its public pages (/demos, /changelog, /docs, the roadmap).
 * Written as a Tailwind @theme block: src/next/app.css imports this file, so the app's utilities (bg-ground, text-ink-2,
 * rounded-card, shadow-card …) come from it. The server serves the same declarations under :root for the static pages
 * (server/pages.ts turns "@theme" into ":root"), so a value changed here shows in both. A brand (shared/brand.ts) overrides
 * the --color-* tokens after this, in the app and on the pages alike. Keep it to custom properties: no rules, no nesting. */
:root {
 --font-sans: 'Instrument Sans', system-ui, sans-serif;
 --font-serif: 'Instrument Serif', Georgia, serif;
 --font-mono: 'JetBrains Mono', ui-monospace, monospace;
 --color-ground: #F4F3EF;
 --color-surface: #FFFFFF;
 --color-surface-2: #FAF9F6;
 --color-line: #E6E3DC;
 --color-line-2: #EEECE6;
 --color-line-strong: #D8D4CA;
 --color-ink: #1C1B18;
 --color-ink-2: #5B5852;
 --color-ink-3: #7A766D;
 --color-ink-4: #9C978B;
 --color-fill: #ECEAE4;
 --color-accent: #0E6B57;
 --color-accent-strong: #0B5747;
 --color-accent-soft: #E4F1EC;
 --color-working: #2F5FC7;
 --color-working-soft: #E6EDF8;
 --color-working-ink: #24487A;
 --color-caution: #9A5B00;
 --color-caution-soft: #FCF1DC;
 --color-caution-line: #F1DDB5;
 --color-caution-ink: #5B4A2A;
 --color-danger: #B3261E;
 --color-danger-soft: #FBE9E7;
 --color-danger-ink: #8C1D17;
 --radius-card: 14px;
 --radius-panel: 18px;
 --radius-control: 9px;
 --spacing: 0.25rem;
 --shadow-card: 0 1px 2px rgba(28,27,24,.04), 0 16px 40px rgba(28,27,24,.06);
 --shadow-raised: 0 2px 6px rgba(28,27,24,.08), 0 20px 48px rgba(28,27,24,.10);
}

/* The public pages' components (/demos, /changelog, /docs, the roadmap), on the app's tokens (shared/design/tokens.css,
 * served ahead of this file as one stylesheet by server/pages.ts). Plain CSS, no build: the shared header and footer, the
 * page title and lede, card, button, chip and prose. Each page keeps only its own layout in its <style>. Light only, like
 * the app. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
 margin: 0; min-height: 100vh; display: flex; flex-direction: column;
 background: var(--color-ground); color: var(--color-ink);
 font: 16px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased;
}
:root { color-scheme: light; --page-wide: 1120px; --page-text: 760px; --gutter: calc(var(--spacing) * 5); }
a { color: var(--color-accent); text-underline-offset: 2px; }
a:hover { color: var(--color-accent-strong); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
img, video { max-width: 100%; }
.ui-main { flex: 1 0 auto; width: 100%; max-width: calc(var(--page-wide) + 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--spacing) * 14) var(--gutter) calc(var(--spacing) * 20); }
.ui-main.narrow { max-width: calc(var(--page-text) + 2 * var(--gutter)); }
.ui-error { color: var(--color-danger); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header: the app's top bar (src/next/builder/TopBar.tsx AppBar): white, 56px, the mark and wordmark back to the app. */
.ui-header { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.ui-header-in { display: flex; align-items: center; gap: calc(var(--spacing) * 3); min-height: 56px; padding: 0 calc(var(--spacing) * 4); }
.ui-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.ui-brand:hover { color: var(--color-ink); }
.ui-brand img { width: 28px; height: 28px; display: block; }
.ui-wordmark { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ui-wordmark i { font-family: var(--font-serif); font-size: 18px; font-weight: 400; }
.ui-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.ui-nav a { padding: 6px 10px; border-radius: var(--radius-control); color: var(--color-ink-2); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ui-nav a:hover { background: var(--color-fill); color: var(--color-ink); }
.ui-nav a[aria-current="page"] { color: var(--color-ink); background: var(--color-fill); }
@media (max-width: 719px) {
 .ui-header-in { flex-wrap: wrap; row-gap: 0; padding-top: 10px; }
 .ui-header-in > .ui-button { margin-left: auto; }
 .ui-nav { order: 3; width: calc(100% + 2 * var(--spacing) * 4); margin: 6px calc(var(--spacing) * -4) 0; padding: 4px calc(var(--spacing) * 3) 6px; overflow-x: auto; border-top: 1px solid var(--color-line-2); }
}

/* Page title and lede: the app's screen headings (New site, Sites, Templates): Instrument Serif, regular, tight. */
.ui-title { margin: 0; font: 400 56px/1.02 var(--font-serif); letter-spacing: -0.015em; text-wrap: balance; }
.ui-title.small { font-size: 44px; line-height: 1.05; }
.ui-lede { margin: calc(var(--spacing) * 3) 0 0; max-width: 62ch; color: var(--color-ink-2); font-size: 17px; line-height: 1.55; }
.ui-intro { margin-bottom: calc(var(--spacing) * 12); }
@media (max-width: 639px) {
 .ui-main { padding-top: calc(var(--spacing) * 9); }
 .ui-title, .ui-title.small { font-size: 40px; }
 .ui-lede { font-size: 15px; }
 .ui-intro { margin-bottom: calc(var(--spacing) * 8); }
}

/* Card: the app's raised surface (the New site composer, the Sites cards). */
.ui-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
a.ui-card { display: block; color: var(--color-ink); text-decoration: none; }
a.ui-card:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-raised); }

/* Button: the app's Button (src/next/ui/Button.tsx) primary and secondary. */
.ui-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--radius-control); border: 1px solid transparent; font: 500 13.5px/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ui-button.primary { background: var(--color-accent); color: #fff; }
.ui-button.primary:hover { background: var(--color-accent-strong); color: #fff; }
.ui-button.secondary { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line-strong); }
.ui-button.secondary:hover { background: var(--color-surface-2); color: var(--color-ink); }

/* Chip: a small rounded label. Neutral by default; tones for status. */
.ui-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-ink-2); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.ui-chip.accent { border-color: transparent; background: var(--color-accent-soft); color: var(--color-accent-strong); }
.ui-chip.working { border-color: transparent; background: var(--color-working-soft); color: var(--color-working-ink); }
.ui-chip.caution { border-color: transparent; background: var(--color-caution-soft); color: var(--color-caution-ink); }
.ui-chip.muted { border-color: transparent; background: var(--color-fill); color: var(--color-ink-2); }

/* Prose: long-form text (docs pages). */
.ui-prose { font-size: 16px; line-height: 1.7; }
.ui-prose > :first-child { margin-top: 0; }
.ui-prose h2 { margin: 2em 0 .5em; font: 400 30px/1.15 var(--font-serif); letter-spacing: -0.01em; scroll-margin-top: 16px; }
.ui-prose h3 { margin: 1.8em 0 .4em; font-size: 18px; font-weight: 600; letter-spacing: -0.005em; scroll-margin-top: 16px; }
.ui-prose p, .ui-prose ul, .ui-prose ol { margin: 0 0 1em; }
.ui-prose ul, .ui-prose ol { padding-left: 1.3em; }
.ui-prose li { margin: .3em 0; }
.ui-prose li::marker { color: var(--color-ink-3); }
.ui-prose strong { font-weight: 600; }
.ui-prose code { font: .86em/1.5 var(--font-mono); background: var(--color-fill); padding: .12em .38em; border-radius: 5px; overflow-wrap: anywhere; }
.ui-prose pre { margin: 1.2em 0; padding: 14px 16px; overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); font-size: 13px; line-height: 1.6; }
.ui-prose pre code { padding: 0; background: none; overflow-wrap: normal; }
.ui-prose blockquote { margin: 1.4em 0; padding: 12px 16px; border-left: 3px solid var(--color-accent); background: var(--color-accent-soft); border-radius: 0 var(--radius-card) var(--radius-card) 0; color: var(--color-ink); }
.ui-prose blockquote p { margin: .2em 0; }
.ui-prose hr { border: 0; border-top: 1px solid var(--color-line); margin: 2em 0; }
.ui-prose .table { overflow-x: auto; margin: 1.2em 0; }
.ui-prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; background: var(--color-surface); }
.ui-prose th, .ui-prose td { border: 1px solid var(--color-line); padding: 8px 11px; text-align: left; vertical-align: top; }
.ui-prose th { background: var(--color-surface-2); font-weight: 600; }

/* Footer: the same links on every page. */
.ui-footer { border-top: 1px solid var(--color-line); background: var(--color-surface-2); color: var(--color-ink-2); font-size: 14px; }
.ui-footer-in { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 3) calc(var(--spacing) * 6); max-width: calc(var(--page-wide) + 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--spacing) * 8) var(--gutter); }
.ui-footer .ui-brand img { width: 24px; height: 24px; }
.ui-footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; }
.ui-footer nav a { color: var(--color-ink-2); text-decoration: none; }
.ui-footer nav a:hover { color: var(--color-ink); text-decoration: underline; }
@media (max-width: 639px) { .ui-footer nav { margin-left: 0; flex-basis: 100%; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }