:root {
   color-scheme: dark;

   --harry-potter-background: #000000;
   --harry-potter-surface: #101010;
   --harry-potter-surface-raised: #1a1a1a;
   --harry-potter-text: #ffffff;
   --harry-potter-primary: #e7d681;
   --harry-potter-primary-hover: #f1e6aa;

   --bs-primary: var(--harry-potter-primary);
   --bs-primary-rgb: 231, 214, 129;
   --bs-primary-text-emphasis: var(--harry-potter-primary);
   --bs-primary-bg-subtle: #2e2b1a;
   --bs-primary-border-subtle: #756d42;

   --bs-body-color: var(--harry-potter-text);
   --bs-body-color-rgb: 255, 255, 255;
   --bs-body-bg: var(--harry-potter-background);
   --bs-body-bg-rgb: 0, 0, 0;
   --bs-emphasis-color: #ffffff;
   --bs-emphasis-color-rgb: 255, 255, 255;
   --bs-secondary-color: var(--harry-potter-text);
   --bs-secondary-color-rgb: 255, 255, 255;
   --bs-secondary-bg: var(--harry-potter-surface);
   --bs-secondary-bg-rgb: 16, 16, 16;
   --bs-tertiary-color: var(--harry-potter-text);
   --bs-tertiary-color-rgb: 255, 255, 255;
   --bs-tertiary-bg: var(--harry-potter-surface-raised);
   --bs-tertiary-bg-rgb: 26, 26, 26;
   --bs-border-color: #3d3d3d;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.18);

   --bs-link-color: var(--harry-potter-primary);
   --bs-link-color-rgb: 231, 214, 129;
   --bs-link-hover-color: var(--harry-potter-primary-hover);
   --bs-link-hover-color-rgb: 241, 230, 170;
}

html,
body,
.page,
main,
article#content {
   color: var(--harry-potter-text);
   background-color: var(--harry-potter-background);
}

.navbar {
   --bs-navbar-color: var(--harry-potter-text);
   --bs-navbar-hover-color: var(--harry-potter-primary);
   --bs-navbar-active-color: var(--harry-potter-primary);
}

.dropdown-menu {
   --bs-dropdown-color: var(--harry-potter-text);
   --bs-dropdown-bg: var(--harry-potter-surface-raised);
   --bs-dropdown-border-color: #3d3d3d;
   --bs-dropdown-link-color: var(--harry-potter-text);
   --bs-dropdown-link-hover-color: #000000;
   --bs-dropdown-link-hover-bg: var(--harry-potter-primary);
   --bs-dropdown-link-active-color: #000000;
   --bs-dropdown-link-active-bg: var(--harry-potter-primary);
}

.dropdown-menu .text-dark {
   color: var(--harry-potter-text) !important;
}

footer .link-dark {
   color: var(--harry-potter-text) !important;
}

footer .link-dark:hover,
footer .link-dark:focus-visible {
   color: var(--harry-potter-primary) !important;
}

header .navbar-brand {
   width: 160px;
}

header .navbar-brand img {
   width: 160px;
   height: auto;
   margin-top: 7px;
}

.btn-primary {
   --bs-btn-color: #000000;
   --bs-btn-bg: var(--harry-potter-primary);
   --bs-btn-border-color: var(--harry-potter-primary);
   --bs-btn-hover-color: #000000;
   --bs-btn-hover-bg: var(--harry-potter-primary-hover);
   --bs-btn-hover-border-color: var(--harry-potter-primary-hover);
   --bs-btn-focus-shadow-rgb: 231, 214, 129;
   --bs-btn-active-color: #000000;
   --bs-btn-active-bg: var(--harry-potter-primary-hover);
   --bs-btn-active-border-color: var(--harry-potter-primary-hover);
   --bs-btn-disabled-color: #000000;
   --bs-btn-disabled-bg: var(--harry-potter-primary);
   --bs-btn-disabled-border-color: var(--harry-potter-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
   color: #000000;
   background-color: var(--harry-potter-primary-hover);
   border-color: var(--harry-potter-primary-hover);
}

.btn-outline-primary {
   --bs-btn-color: var(--harry-potter-primary);
   --bs-btn-border-color: var(--harry-potter-primary);
   --bs-btn-hover-color: #000000;
   --bs-btn-hover-bg: var(--harry-potter-primary);
   --bs-btn-hover-border-color: var(--harry-potter-primary);
   --bs-btn-focus-shadow-rgb: 231, 214, 129;
   --bs-btn-active-color: #000000;
   --bs-btn-active-bg: var(--harry-potter-primary-hover);
   --bs-btn-active-border-color: var(--harry-potter-primary-hover);
   --bs-btn-disabled-color: var(--harry-potter-primary);
   --bs-btn-disabled-border-color: var(--harry-potter-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active {
   color: #000000;
   background-color: var(--harry-potter-primary);
   border-color: var(--harry-potter-primary);
}

.form-check-input[type="radio"].radio-square,
.form-check-input[type="radio"].radio-square:checked,
.form-check-input[type="checkbox"].checkbox-square {
   border-color: var(--harry-potter-primary);
}

.form-check-input[type="radio"].radio-square:checked::before {
   background: var(--harry-potter-primary);
}

.form-check-input[type="radio"].radio-square:focus,
.form-check-input[type="checkbox"].checkbox-square:focus {
   box-shadow: 0 0 0 2px rgba(231, 214, 129, 0.25);
}

header svg [fill="#6d0d22" i],
header .basket svg path {
   fill: var(--harry-potter-primary);
}

header .basket-amount {
   color: var(--harry-potter-primary);
}

.containerCookie .cookie-panel {
   color: var(--harry-potter-text);
   background-color: var(--harry-potter-surface);
}

.containerCookie .cookie-toggle-label {
   color: var(--harry-potter-text);
}