:root {
    /* These custom variables are now mapped to Bootstrap's variables */
    --active-color: var(--bs-dark);
    --inactive-color: var(--bs-light);
    --correct: var(--bs-success);
    --incorrect: var(--bs-danger);
}

/* --- THEME BUTTON --- */
#theme-button {
    width: 45px;
    font-weight: regular;
    border-width: 1px;
    /* Colors are set by theme variables below */
    background-color: var(--theme-button-bg, var(--bs-secondary-bg));
    color: var(--theme-button-color, var(--bs-secondary-color));
    border-color: var(--theme-button-border, var(--bs-border-color));
}


/* --- THEMES --- */
/* Each theme defines Bootstrap variables and custom variables. */

/* --- THEME: Цвета 1 (Default) --- */
[data-bs-theme="Цвета 1"] {
    --bs-body-bg: #FFFFFF;
    --bs-body-color: #212529;
    --bs-tertiary-bg: #f8f9fa;
    --bs-border-color: #dee2e6;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
    --bs-primary: #000000;
    
    --active-color: #212529;
    --inactive-color: #f8f9fa;
    --correct: #595959;
    --incorrect: #8B0000;

    --theme-button-bg: #FFFFFF;
    --theme-button-color: #212529;
    --theme-button-border: #212529;

    --choice-btn-bg: #f8f9fa;
    --choice-btn-color: #212529;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23212529' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="Цвета 1"] .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 1;
}

/* --- THEME: Цвета 2 --- */
[data-bs-theme="Цвета 2"] {
    --bs-body-bg: #e9eaeb;
    --bs-body-color: #000000;
    --bs-tertiary-bg: #c5c5c5;
    --bs-border-color: #b1b1b1;
    --bs-link-color: #b1b1b1;
    --bs-link-hover-color: #b1b1b1;
    --bs-primary: #000000;

    --active-color: #000000;
    --inactive-color: #e9eaeb;
    --correct: #595959;
    --incorrect: #8B0000;

    --theme-button-bg: #e9eaeb;
    --theme-button-color: #000000;
    --theme-button-border: #000000;

    --choice-btn-bg: #c5c5c5;
    --choice-btn-color: #000000;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="Цвета 2"] .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 1;
}

/* --- THEME: Цвета 3 --- */
[data-bs-theme="Цвета 3"] {
    --bs-body-bg: #3D3D3D;
    --bs-body-color: #FFFFFF;
    --bs-tertiary-bg: #7a7a7a;
    --bs-border-color: #7a7a7a;
    --bs-link-color: #c5c5c5;
    --bs-link-hover-color: #c5c5c5;
    --bs-primary: #FFFFFF;

    --active-color: #FFFFFF;
    --inactive-color: #3D3D3D;
    --correct: #3D3D3D;
    --incorrect: #8B0000;

    --theme-button-bg: #3D3D3D;
    --theme-button-color: #FFFFFF;
    --theme-button-border: #FFFFFF;

    --choice-btn-bg: #7a7a7a;
    --choice-btn-color: #FFFFFF;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="Цвета 3"] .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 1;
}

/* --- THEME: Цвета 4 --- */
[data-bs-theme="Цвета 4"] {
    --bs-body-bg: #292929;
    --bs-body-color: #FFFFFF;
    --bs-tertiary-bg: #3D3D3D;
    --bs-border-color: #495057;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-primary: #FFFFFF;

    --active-color: #FFFFFF;
    --inactive-color: #292929;
    --correct: #292929;
    --incorrect: #8B0000;

    --theme-button-bg: #292929;
    --theme-button-color: #FFFFFF;
    --theme-button-border: #FFFFFF;

    --choice-btn-bg: #3D3D3D;
    --choice-btn-color: #FFFFFF;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="Цвета 4"] .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 1;
}

/* --- THEME: Цвета 5 --- */
[data-bs-theme="Цвета 5"] {
    --bs-body-bg: #fdf8f0;
    --bs-body-color: #5c4033;
    --bs-tertiary-bg: #f5efe1;
    --bs-border-color: #dcd0b9;
    --bs-border-color-translucent: rgba(92, 64, 51, 0.175);
    --bs-link-color: #8b4513;
    --bs-link-hover-color: #a0522d;
    --bs-primary: #8b4513;
    --bs-primary-rgb: 139, 69, 19;

    --active-color: #5c4033;
    --inactive-color: #fdf8f0;
    --correct: #5c4033;
    --incorrect: #8B0000;

    --theme-button-bg: #fdf8f0;
    --theme-button-color: #5c4033;
    --theme-button-border: #5c4033;

    --choice-btn-bg: #f5efe1;
    --choice-btn-color: #5c4033;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%235c4033' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="Цвета 5"] .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235c4033'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 1;
}

/* CSS for swapping image assets based on theme */
/* By default, show the light version */
.themed-logo .logo-dark,
.themed-logo .logo-5 {
  display: none;
}
.themed-logo .logo-light {
  display: inline;
}

/* Show the dark version in dark mode */
[data-bs-theme="Цвета 4"] .themed-logo .logo-light,
[data-bs-theme="Цвета 4"] .themed-logo .logo-5 {
  display: none;
}
[data-bs-theme="Цвета 4"] .themed-logo .logo-dark {
  display: inline;
}

/* Show the logo-5 version in Цвета 5 mode */
[data-bs-theme="Цвета 5"] .themed-logo .logo-light,
[data-bs-theme="Цвета 5"] .themed-logo .logo-dark {
  display: none;
}
[data-bs-theme="Цвета 5"] .themed-logo .logo-5 {
  display: inline;
}

.themed-svg {
    color: var(--bs-body-color);
    fill: currentColor;
}