:root {
    /* gray scale */
    --gray05: #F2F2F2;
    --gray20: #CCC;
    --gray40: #999;
    --gray60: #666;
    --gray80: #333;
    --gray90: #1A1A1A;

    /* color scheme light, dark */
    color-scheme: light dark;
    --background: light-dark(#FFF, var(--gray90));
    --bg-secondary: light-dark(var(--gray05), var(--gray80));
    --color: light-dark(var(--gray90), #FFF);
    --color-secondary: light-dark(var(--gray80), var(--gray05));
    --text-color: var(--color);
    --link: light-dark(#00118F, #99F2FF);
    --link-hover: light-dark(#006F83, #99F2FF);
    --link-visited: light-dark(#8B008B, #FF8EFF);
    --disabled: light-dark(var(--gray40), var(--gray60));

    --primary: light-dark(#0031D8, #99F2FF);
    --secondary: light-dark(#008299, #C5D7FD);

    --warning: light-dark(#C74700, #FFA66D);
    --bg-warning: light-dark(#FFC199, #6D2700);

    --error: light-dark(#EC0000, #F137F1);
    --bg-error: light-dark(#FFAEFF, #CE0000);

    --success: light-dark(#197A4B, #C0F354);
    --bg-success: light-dark(#51B883, #115A36);

    --info: light-dark(#0877D7, #4FC3F7);
    --bg-info: light-dark(#C0E4FF, #134B5D);

    /* numpre */
    --same-number: light-dark(#FFDFCA, #927200);
    --same-group: light-dark(#FFF0B3, #6D2700);
    --error: light-dark(#EC0000, #FA0000);
    --outer-border: light-dark(var(--gray90), #FFF);
    --inner-border-thin: light-dark(var(--gray80), var(--gray05));
    --inner-border-thick: light-dark(var(--gray80), var(--gray05));
}
body.light {
    color-scheme: light;
}
body.dark {
    color-scheme: dark;
}

@media print {
    body.light, body.dark {
        --background: #FFF;
        --bg-secondary: #FFF;
        --color: #000;
        --color-secondary: var(--gray80);

        --link: light-dark(#00118F, #99F2FF);
        --disabled: var(--gray40);

        --primary: #FFF;
        --secondary: var(--gray80);

        --warning: #000;
        --bg-warning: #FFF;

        --error: #000;
        --bg-error: #FFF;

        --success: #000;
        --bg-success: #FFF;

        --info: #000;
        --bg-info: #FFF;

        /* numpre */
        --same-number: #FFF;
        --same-group: #FFF;
        --error: #FFF;
        --outer-border: #000;
        --inner-border-thin: #000;
        --inner-border-thick: #000;
    }
}