:root {
    --theme-dur: 700ms;
    --theme-ease: cubic-bezier(.2,.8,.2,1);

    --bg: #0d091a;
    --panel1: #191031;
    --panel2: #291e47;
    --panel3: #3e3065;

    --text: #ffffff;
    --muted1: #dddddd;
    --muted2: #aaaaaa;
    
    --link: #bdbbff;
    --link-hover: #dbd9ff;
    --focus: #8fa2ff;

    --field-bg: #141125;
    --field-text: var(--text);
    --field-border: rgba(255,255,255,0.10);
    --field-error: #e55353;

    --table-bg: rgba(0,0,0,0.1);
    --table-text: var(--text);
    --table-border: rgba(255,255,255,0.10);
    --table-head: rgba(0,0,0,0.03);
    --table-zebra-odd: rgba(0,0,0,0.02);
    --table-zebra-even: rgba(0,0,0,0.00);
    --table-hover: rgba(255,255,255,0.02);
    --table-edit: rgba(143,162,255,0.10);
    --table-edit-border: var(--focus);

    --btn-bg: rgba(255,255,255,0.10);
    --btn-text: var(--text);
    --btn-primary: #2b7de9;
    --btn-success: #118e39;

    --toast-bg: rgba(255, 229, 229, 0.15);
    --toast-text: #ffd2d2;
    --toast-border: rgba(242, 162, 162, 0.35);

    --icon-default: #e3e3e3;
    --icon-success: #3bb43b;
    --icon-danger: #d64948;

    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg: #f6f7fb;
    --panel1: #ffffff;
    --panel2: #f0f2f8;
    --panel3: #e7e9f7;

    --text: #12131a;
    --muted1: #44465a;
    --muted2: #6b6f86;

    --link: #3f49d6;
    --link-hover: #2f36b8;
    --focus: #3b5cff;

    --field-bg: #ffffff;
    --field-text: #12131a;
    --field-border: rgba(18,19,26,0.18);

    --table-bg: #F1F1F1;
    --table-text: #12131a;
    --table-border: #C8C8C8;
    --table-head: #eef0f6;
    --table-zebra-odd: #f8f9fc;
    --table-zebra-even: #ffffff;
    --table-hover: #eceffd;
    --table-edit: #eef0ff;
    --table-edit-border: #12131a;

    --btn-bg: #e9ebf3;
    --btn-text: #12131a;

    --toast-bg: #ffe5e5;
    --toast-text: #661b1b;
    --toast-border: #f2a2a2;

    --icon-default: #000000;

    color-scheme: dark;
}

body {
    transition:
        background-color var(--theme-dur) var(--theme-ease),
        color           var(--theme-dur) var(--theme-ease),
        border-color    var(--theme-dur) var(--theme-ease),
        box-shadow      var(--theme-dur) var(--theme-ease),
        fill            var(--theme-dur) var(--theme-ease),
        stroke          var(--theme-dur) var(--theme-ease);
}

.theme-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.tt-icon {
    width: 32px;
    height: 32px;
    display: block;
}

/* press feedback */
.theme-toggle:active {
    transform: scale(0.97);
}

/* while animating, block clicks + show busy cursor */
.theme-toggle.tt-animating {
    cursor: progress;
    pointer-events: none;
}