/*
 * Tokens shared with the KiwiPow IDE kit, so the site and the product read as one brand.
 * Light is the default, dark follows the OS, and `data-theme` on <html> overrides either.
 */
:root {
    --linen: #f5f0e8;
    --paper: #fffdf9;
    --birch: #eee5d9;
    --sand: #f1eae0;
    --line: #e4dbce;
    --line-strong: #c7baa8;

    --frame: #e7dfd3;
    --head-top: #fdfaf5;
    --head-bottom: #f0e8dd;
    --shine: rgb(255 255 255 / 75%);
    --head: linear-gradient(180deg, var(--head-top), var(--head-bottom));

    --ink: #2a2522;
    --ink-soft: #544c46;
    --quiet: #665d55;

    --bark: #6b4a35;
    --bark-fill: #6b4a35;
    --on-bark: #ffffff;
    --bark-soft: #f0e4d8;
    --fjord: #2d5d7b;
    --fjord-soft: #e2ecf2;

    --moss: #4a6a28;
    --moss-soft: #e6eedb;
    --ochre: #7a5c00;
    --ochre-soft: #f7eecb;
    --lingon: #a3302b;
    --lingon-soft: #f8e1dd;
    --stone: #67635d;
    --stone-soft: #ebe9e5;

    --series-1: #a55a2a;
    --series-2: #2f74b5;
    --series-3: #5e8f3a;
    --series-4: #b0477e;

    --code-bg: #fbf8f3;

    --radius: 10px;
    --radius-small: 6px;
    --gap: 1.25rem;
    --shadow: 0 1px 2px rgb(60 40 20 / 6%), 0 2px 8px rgb(60 40 20 / 5%);

    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, ui-monospace, monospace;
    --text: 16px;
    --measure: 68ch;
    --page: 72rem;

    --tone: var(--stone);
    --tone-soft: var(--stone-soft);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --linen: #1b1917;
        --paper: #242120;
        --birch: #201d1b;
        --sand: #2e2a27;
        --line: #38332f;
        --line-strong: #564e47;
        --frame: #121110;
        --head-top: #312c28;
        --head-bottom: #262321;
        --shine: rgb(255 255 255 / 6%);
        --ink: #ede6dd;
        --ink-soft: #c9bfb4;
        --quiet: #a0968b;
        --bark: #dba57c;
        --bark-fill: #9c5c35;
        --bark-soft: #3a2b21;
        --fjord: #82b8e0;
        --fjord-soft: #1d3140;
        --moss: #a2c872;
        --moss-soft: #263120;
        --ochre: #e6bf55;
        --ochre-soft: #372e17;
        --lingon: #f1907f;
        --lingon-soft: #42221e;
        --stone: #aaa39a;
        --stone-soft: #302c29;
        --series-1: #c27a48;
        --series-2: #4a8fcc;
        --series-3: #6f9e46;
        --series-4: #c66a9c;
        --code-bg: #1e1c1a;
        --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 25%);
        color-scheme: dark;
    }
}

:root[data-theme='dark'] {
    --linen: #1b1917;
    --paper: #242120;
    --birch: #201d1b;
    --sand: #2e2a27;
    --line: #38332f;
    --line-strong: #564e47;
    --frame: #121110;
    --head-top: #312c28;
    --head-bottom: #262321;
    --shine: rgb(255 255 255 / 6%);
    --ink: #ede6dd;
    --ink-soft: #c9bfb4;
    --quiet: #a0968b;
    --bark: #dba57c;
    --bark-fill: #9c5c35;
    --bark-soft: #3a2b21;
    --fjord: #82b8e0;
    --fjord-soft: #1d3140;
    --moss: #a2c872;
    --moss-soft: #263120;
    --ochre: #e6bf55;
    --ochre-soft: #372e17;
    --lingon: #f1907f;
    --lingon-soft: #42221e;
    --stone: #aaa39a;
    --stone-soft: #302c29;
    --series-1: #c27a48;
    --series-2: #4a8fcc;
    --series-3: #6f9e46;
    --series-4: #c66a9c;
    --code-bg: #1e1c1a;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 25%);
    color-scheme: dark;
}

[data-tone='ok'] { --tone: var(--moss); --tone-soft: var(--moss-soft); }
[data-tone='info'] { --tone: var(--fjord); --tone-soft: var(--fjord-soft); }
[data-tone='warn'] { --tone: var(--ochre); --tone-soft: var(--ochre-soft); }
[data-tone='danger'] { --tone: var(--lingon); --tone-soft: var(--lingon-soft); }
[data-tone='muted'] { --tone: var(--stone); --tone-soft: var(--stone-soft); }