/* ==============================
   THEME TOKENS
   Default = DARK
============================== */

/* default = dark */
:root {
    color-scheme: dark;

    --bg: #213454;
    --sheet: #324152;
    --grid: #314eac;

    --text: #e6ecfa;
    --muted: #8da4cc;

    --header-top: #243341;
    --header-btm: #354973;

    --accent: #69beff;

    --check: #2d5591;
    --check-on: #69beff;

    --brand: #4c7dd3;
    --brand1: #7293d4;
    --brand-contrast: #cfe1ff;

    --card1: #2c54a8;
    --card: #10368a;

    --form-border: #52627a;
    --form-focus: #69beff;
}

/* light */
html[data-theme="light"] {
    color-scheme: light;

    --bg: #db7bdb;
    --sheet: #f7f7f7;
    --grid: #cbdbeb;

    --td-text: #330033;
    --muted: #c672d7;

    --header-top: #e6cbeb;
    --header-btm: #f9cdff;

    --accent: #ec3cfc;

    --check: #b065b3;
    --check-on: #e43eea;

    --brand: #f19bf1;
    --brand1: #c256c2;
    --brand-contrast: #ffdab9;

    --card1: #bb09bb;
    --card: #991999;

    --form-border: #d6d6d6;
    --form-focus: #ffe2c7;
}

/* ------------------------------
    Nice-to-have: smooth theme transition
------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    html.theme-anim * {
        transition: background-color 160ms ease, color 160ms ease,
            border-color 160ms ease;
    }
}