:root {
    color-scheme: light;
    --background: #fbf1c7;
    --background-secondary: #f2e5bc;
    --foreground: #3c3836;
    --foreground-muted: #665c54;
    --border: #d5c4a1;
    --accent: #af3a03;
    --accent-hover: #9d0006;
    --code-background: #f2e5bc;
    --selection: #d79921;
    --selection-foreground: #3c3836;
    --on-accent: #fbf1c7;
    --focus-ring: rgb(175 58 3 / .22);
    --success: #79740e;
    --danger: #9d0006;
    --syntax-comment: #928374;
    --syntax-red: #9d0006;
    --syntax-green: #79740e;
    --syntax-yellow: #b57614;
    --syntax-blue: #076678;
    --syntax-purple: #8f3f71;
    --syntax-aqua: #427b58;
    --syntax-orange: #af3a03;
    --ink: var(--foreground);
    --muted: var(--foreground-muted);
    --paper: var(--background);
    --card: var(--background-secondary);
    --line: var(--border);
    --green: var(--success);
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--paper);
    font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --background: #282828;
        --background-secondary: #32302f;
        --foreground: #ebdbb2;
        --foreground-muted: #a89984;
        --border: #504945;
        --accent: #fe8019;
        --accent-hover: #fabd2f;
        --code-background: #1d2021;
        --selection: #d65d0e;
        --selection-foreground: #282828;
        --on-accent: #282828;
        --focus-ring: rgb(254 128 25 / .28);
        --success: #b8bb26;
        --danger: #fb4934;
        --syntax-red: #fb4934;
        --syntax-green: #b8bb26;
        --syntax-yellow: #fabd2f;
        --syntax-blue: #83a598;
        --syntax-purple: #d3869b;
        --syntax-aqua: #8ec07c;
        --syntax-orange: #fe8019;
    }
}

* { box-sizing: border-box; }
::selection { background: var(--selection); color: var(--selection-foreground); }
body { margin: 0; min-height: 100vh; background: var(--paper); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

.brand { font-size: 1.25rem; font-weight: 900; letter-spacing: -.07em; }
.brand span { color: var(--accent); }
.brand small { margin-left: 8px; color: var(--muted); font-size: .65rem; letter-spacing: .04em; }
.button {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 2px; padding: 13px 20px;
    background: var(--ink); color: var(--background); font-weight: 700; cursor: pointer;
}
.button:hover { background: var(--accent); color: var(--on-accent); }
.button-small { padding: 9px 14px; font-size: .86rem; }
.eyebrow { margin: 0 0 18px; color: var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .18em; }
.empty-state { padding: 70px 20px; text-align: center; border-bottom: 1px solid var(--line); }
.empty-state > span { color: var(--accent); font-family: Georgia, serif; font-size: 4rem; }
.empty-state h1, .empty-state h2, .empty-state h3 { margin: 8px 0; font-family: Georgia, serif; font-size: 2rem; }
.empty-state p { color: var(--muted); }
.page-empty { min-height: 65vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.page-empty .button { margin-top: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}