:root {
    --dark-base: #0e3d93;
    --base: #185ee0;
    --light-base: #3c9aff;
    --white-base: #ecf0fc;
    --white-base-dark: #f1f1f1;

    --background-color: #f0f0f5;
    --app-color: #f6f6f6;
    --app-color-alpha: #f6f6f610;

    --white: #ffffff;
    --black: #000000;
    --soft-white: #fafafa;
    --soft-white-dark: #f1f1f1;

    --text-dark: #141414;
    --text-dark-mid: #393939;
    --text-dark-soft: #555555;

    --shadow-app: #00000020;
    --shadow-base: #185ee036;

    --cooldown: #0000ff1a;

    --app-width: 600px;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

:root.dark {
    --dark-base: #ffc402;
    --base: #ffd940;
    --light-base: #998439;
    --white-base: #2e2a1b;
    --white-base-dark: #3a341f;

    --background-color: #121212;
    --app-color: #1e1e1e;
    --app-color-alpha: #1e1e1e10;

    --white: #000000;
    --black: #ffffff;
    --soft-white: #282828;
    --soft-white-dark: #333333;

    --text-dark: #f5f5f5;
    --text-dark-mid: #e2e3e7;
    --text-dark-soft: #d1d1d1;

    --shadow-app: #00000010;
    --shadow-base: #00000059;
    --svg-filter: invert(85%) sepia(89%) saturate(1024%) hue-rotate(369deg) brightness(120%) contrast(102%);

    --cooldown: #ffff001a;
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition:
        background-color 0.6s ease,
        color 0.6s ease,
        border-color 0.6s ease,
        box-shadow 0.6s ease !important;
}