/*
 * Color roles. Rules elsewhere use only these, never a hex value. Every text
 * and control pairing is at least 4.5:1 in both schemes (checked when the
 * values were chosen): a control's boundary is --border-strong, never the
 * decorative --border, and no text is lighter than --text-3.
 */
:root {
    color-scheme: light dark;

    --canvas: #f4f6f8;
    --surface: #ffffff;
    --surface-2: #eef1f5;
    --text: #1a1f26;
    --text-2: #3f4854;
    --text-3: #55606d;
    --border: #d5dae1;
    --border-strong: #5f6a78;
    --accent: #0b57d0;
    --accent-fg: #ffffff;
    --accent-bg: #e3edfd;
    --positive-bg: #dff3e4;
    --positive-fg: #14532d;
    --negative: #b3261e;
    --negative-fg: #ffffff;
    --negative-bg: #fde7e5;
    --negative-text: #8c1d18;
    --focus: #0b57d0;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2.5rem;
    --radius: 0.5rem;
    --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --measure: 72rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --canvas: #0f1318;
        --surface: #181d24;
        --surface-2: #212832;
        --text: #e8ebef;
        --text-2: #bcc4ce;
        --text-3: #a0aab6;
        --border: #313a46;
        --border-strong: #8a95a3;
        --accent: #8ab4f8;
        --accent-fg: #0a1a33;
        --accent-bg: #1c2b45;
        --positive-bg: #1b3a26;
        --positive-fg: #a8e3bb;
        --negative: #f28b82;
        --negative-fg: #2b0c09;
        --negative-bg: #3d1a18;
        --negative-text: #ffb4ab;
        --focus: #8ab4f8;
    }
}

:root[data-theme='dark'] {
    --canvas: #0f1318;
    --surface: #181d24;
    --surface-2: #212832;
    --text: #e8ebef;
    --text-2: #bcc4ce;
    --text-3: #a0aab6;
    --border: #313a46;
    --border-strong: #8a95a3;
    --accent: #8ab4f8;
    --accent-fg: #0a1a33;
    --accent-bg: #1c2b45;
    --positive-bg: #1b3a26;
    --positive-fg: #a8e3bb;
    --negative: #f28b82;
    --negative-fg: #2b0c09;
    --negative-bg: #3d1a18;
    --negative-text: #ffb4ab;
    --focus: #8ab4f8;
}