:root[data-theme="dark"] {
    --blue:        #3b82f6;
    --blue-dark:   #60a5fa;
    --blue-light:  #93c5fd;
    --blue-50:     #16243f;
    --blue-100:    #1e3a5f;

    --ink:         #e8edf6;
    --slate:       #b4c0d4;
    --muted:       #8b99b0;
    --line:        #29344c;
    --line-soft:   #1b2336;
    --page:        #0b1220;
    --card:        #151d2e;
    --surface:     #1b2438;

    --green-soft:  #123021;
    --green-ink:   #4ade80;
    --amber-soft:  #372709;
    --amber-ink:   #fbbf24;
    --red-soft:    #3a1a1a;
    --red-ink:     #f87171;

    --toast-bg:    #e8edf6;
    --toast-ink:   #0b1220;

    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-md:   0 4px 6px rgba(0, 0, 0, .35), 0 10px 20px rgba(0, 0, 0, .4);
    --shadow-lg:   0 10px 15px rgba(0, 0, 0, .4), 0 24px 48px rgba(0, 0, 0, .5);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --blue:        #3b82f6;
        --blue-dark:   #60a5fa;
        --blue-light:  #93c5fd;
        --blue-50:     #16243f;
        --blue-100:    #1e3a5f;

        --ink:         #e8edf6;
        --slate:       #b4c0d4;
        --muted:       #8b99b0;
        --line:        #29344c;
        --line-soft:   #1b2336;
        --page:        #0b1220;
        --card:        #151d2e;
        --surface:     #1b2438;

        --green-soft:  #123021;
        --green-ink:   #4ade80;
        --amber-soft:  #372709;
        --amber-ink:   #fbbf24;
        --red-soft:    #3a1a1a;
        --red-ink:     #f87171;

        --toast-bg:    #e8edf6;
        --toast-ink:   #0b1220;

        --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
        --shadow-md:   0 4px 6px rgba(0, 0, 0, .35), 0 10px 20px rgba(0, 0, 0, .4);
        --shadow-lg:   0 10px 15px rgba(0, 0, 0, .4), 0 24px 48px rgba(0, 0, 0, .5);

        color-scheme: dark;
    }
}

/* ---------- the few things tokens can't reach ---------- */

/* the select arrow is a background image, so it needs a lighter stroke */
:root[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b99b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b99b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }
}

/* empty-state dashes read too harshly on a dark page */
:root[data-theme="dark"] .empty { border-color: var(--line); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .empty { border-color: var(--line); }
}

/* ---------- the toggle button ---------- */

.theme-toggle { position: relative; }
.theme-toggle .icon { transition: transform .35s ease, opacity .2s ease; }

/* show the moon in light mode (click = go dark), the sun in dark mode */
.theme-toggle .i-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .i-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .i-light { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .i-dark { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .i-light { display: none; }
}
.theme-toggle:hover .icon { transform: rotate(-18deg); }

/* pages with no top bar (the login screen) get a floating one */
.theme-toggle.floating {
    position: fixed; top: 18px; right: 18px; z-index: 120;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #e8edf6;
    padding: 9px; border-radius: var(--radius-sm);
    backdrop-filter: blur(6px);
}
.theme-toggle.floating:hover { background: rgba(255, 255, 255, .18); color: #fff; }

@media (max-width: 640px) {
    .theme-toggle.floating { top: 12px; right: 12px; }
}