:root {
    --bg: #000000;
    --surface: #0a0a0a;
    --border: rgba(255, 255, 255, 0.1);
    --text: #ffffff;
    --dimmed: rgba(255, 255, 255, 0.56);
    --g1: #161616;
    --g2: #232323;
    --g3: #2f2f2f;
    --glow: rgba(255, 255, 255, 0.1);
    --primary-hover: #e3e3e3;
    --grain: 0.035;
    --ok: #3dd68c;

    --font-body:
        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
        sans-serif;
    --font-head:
        'Unbounded', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 13px;
    --r-lg: 16px;
    --r-xl: 22px;
    --wrap: 1200px;
    color-scheme: dark;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme='dark']) {
        --bg: #fafafa;
        --surface: #ffffff;
        --border: rgba(0, 0, 0, 0.1);
        --text: #0a0a0a;
        --dimmed: rgba(10, 10, 10, 0.56);
        --g1: #f2f2f2;
        --g2: #ebebeb;
        --g3: #e1e1e1;
        --glow: rgba(255, 255, 255, 0.85);
        --primary-hover: #2f2f2f;
        --grain: 0.03;
        --ok: #18a058;
        color-scheme: light;
    }
}
:root[data-theme='light'] {
    --bg: #fafafa;
    --surface: #ffffff;
    --border: rgba(0, 0, 0, 0.1);
    --text: #0a0a0a;
    --dimmed: rgba(10, 10, 10, 0.56);
    --g1: #f2f2f2;
    --g2: #ebebeb;
    --g3: #e1e1e1;
    --glow: rgba(255, 255, 255, 0.85);
    --primary-hover: #2f2f2f;
    --grain: 0.03;
    --ok: #18a058;
    color-scheme: light;
}