:root,
[data-bs-theme='light'],
[data-bs-theme='dark'] {
    --app-accent: #2f6fed;
    --app-accent-hover: #2559c5;
    --app-accent-contrast: #ffffff;
    --app-accent-soft: #e0e9ff;
    --app-accent-rgb: 47, 111, 237;
    --app-accent-hover-rgb: 37, 89, 197;

    --bs-theme: var(--app-accent);
    --bs-theme-rgb: var(--app-accent-rgb);
    --bs-theme-color: var(--app-accent-contrast);
    --bs-theme-color-rgb: 255, 255, 255;

    --bs-primary: var(--app-accent);
    --bs-primary-rgb: var(--app-accent-rgb);
    --bs-link-color: var(--app-accent);
    --bs-link-color-rgb: var(--app-accent-rgb);
    --bs-link-hover-color: var(--app-accent-hover);
    --bs-link-hover-color-rgb: var(--app-accent-hover-rgb);
    --bs-primary-text-emphasis: var(--app-accent);
    --bs-primary-bg-subtle: var(--app-accent-soft);
    --bs-primary-border-subtle: var(--app-accent-soft);
}

body.theme-blue,
html.theme-blue {
    --app-accent: #2f6fed;
    --app-accent-hover: #2559c5;
    --app-accent-contrast: #ffffff;
    --app-accent-soft: #e0e9ff;
    --app-accent-rgb: 47, 111, 237;
    --app-accent-hover-rgb: 37, 89, 197;
}

body.theme-green,
html.theme-green {
    --app-accent: #2ab37d;
    --app-accent-hover: #208a61;
    --app-accent-contrast: #ffffff;
    --app-accent-soft: #dff5ea;
    --app-accent-rgb: 42, 179, 125;
    --app-accent-hover-rgb: 32, 138, 97;
}

body.theme-red,
html.theme-red {
    --app-accent: #e85757;
    --app-accent-hover: #cc3f3f;
    --app-accent-contrast: #ffffff;
    --app-accent-soft: #fde3e3;
    --app-accent-rgb: 232, 87, 87;
    --app-accent-hover-rgb: 204, 63, 63;
}

body.theme-purple,
html.theme-purple {
    --app-accent: #7c4dff;
    --app-accent-hover: #6237d9;
    --app-accent-contrast: #ffffff;
    --app-accent-soft: #ece4ff;
    --app-accent-rgb: 124, 77, 255;
    --app-accent-hover-rgb: 98, 55, 217;
}

body.theme-sunset,
html.theme-sunset {
    --app-accent: #ff6b35;
    --app-accent-hover: #d65a2b;
    --app-accent-contrast: #ffffff;
    --app-accent-soft: #ffe6dc;
    --app-accent-rgb: 255, 107, 53;
    --app-accent-hover-rgb: 214, 90, 43;
}

.btn-primary {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-accent-contrast);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--app-accent-hover);
    border-color: var(--app-accent-hover);
}

.badge.bg-primary {
    background-color: var(--app-accent) !important;
    color: var(--app-accent-contrast);
}