:root {
    --theme: "light";
    --bg-color: #ffffff;
    --text-color: #111111;
    --text-secondary-color: #6e6e6e;
    --link-color: #512db4;
    --main-color: #512db4;
    --main-deep-color: #1b0f48;
    --on-main-color: #ffffff;
    --focus-main-color: #512db410;
    --footer-bg: color-mix(in srgb, var(--bg-color) 96%, #000000 4%);
    --footer-border: color-mix(in srgb, var(--text-color) 12%, transparent);
}

.dark {
    --theme: "dark";
    --bg-color: #181a1b;
    --text-color: #e0e0e0;
    --text-secondary-color: #aeaeae;
    --link-color: #ac99ea;
    --main-color: #ac99ea;
    --main-deep-color: #c6b7e5;
    --on-main-color: #181a1b;
    --focus-main-color: #ac99ea10;
    --footer-bg: color-mix(in srgb, var(--bg-color) 90%, #ffffff 10%);
    --footer-border: rgba(255, 255, 255, 0.18);
}

input[type="file"] {
    color: var(--text-secondary-color);
}

input[type="file"]::file-selector-button {
    margin: -.45rem .8rem -.45rem -.75rem;
    padding: .58rem 1rem;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--main-color) 45%, transparent);
    background: var(--main-color);
    color: var(--on-main-color);
    font-weight: 650;
    cursor: pointer;
    transition: filter .15s ease;
}

input[type="file"]::file-selector-button:hover {
    filter: brightness(1.08);
}

/* Bootstrap's solid primary states default to white text. Keep their foreground
   in sync with the active theme so light accent colors remain readable. */
.text-bg-primary {
    background-color: var(--main-color) !important;
    color: var(--on-main-color) !important;
}

.page-item.active .page-link,
.page-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.list-group-item.active,
.dropdown-item.active {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: var(--on-main-color);
}

.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-outline-primary:first-child:active,
:not(.btn-check) + .btn-outline-primary:active {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: var(--on-main-color);
}