:root {
    color-scheme: dark;
    --site-bg: #000000;
    --site-surface: transparent;
    --site-surface-raised: transparent;
    --site-text: #ffffff;
    --site-muted: #ffffff;
    --site-border: rgba(255, 255, 255, 0.4);
    --site-accent: #d4a64e;
}

html[data-theme="light"] {
    color-scheme: dark;
    --site-bg: #000000;
    --site-surface: transparent;
    --site-surface-raised: transparent;
    --site-text: #ffffff;
    --site-muted: #ffffff;
    --site-border: rgba(255, 255, 255, 0.4);
    --site-accent: #d4a64e;
}

html[data-theme="dark"] body {
    background: var(--site-bg) !important;
    background-image:
        radial-gradient(1px 1px at 19px 31px, #fff 98%, transparent 100%),
        radial-gradient(1px 1px at 73px 84px, #dce9ff 98%, transparent 100%),
        radial-gradient(1.5px 1.5px at 142px 27px, #fff 98%, transparent 100%),
        radial-gradient(1px 1px at 181px 116px, #dce9ff 98%, transparent 100%) !important;
    background-size: 220px 160px !important;
    background-attachment: fixed !important;
    color: var(--site-text) !important;
}

html[data-theme="light"] body {
    background: var(--site-bg) !important;
    background-image:
        radial-gradient(1px 1px at 19px 31px, #fff 98%, transparent 100%),
        radial-gradient(1px 1px at 73px 84px, #dce9ff 98%, transparent 100%),
        radial-gradient(1.5px 1.5px at 142px 27px, #fff 98%, transparent 100%),
        radial-gradient(1px 1px at 181px 116px, #dce9ff 98%, transparent 100%) !important;
    background-size: 220px 160px !important;
    background-attachment: fixed !important;
    color: var(--site-text) !important;
}

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .dropdown-menu {
    background-color: transparent !important;
    border-color: var(--site-border) !important;
}

html[data-theme="light"] .navbar,
html[data-theme="light"] .dropdown-menu {
    background: transparent !important;
    border-color: var(--site-border) !important;
}

html[data-theme="light"] .navbar-brand,
html[data-theme="light"] .nav-link,
html[data-theme="light"] .dropdown-item,
html[data-theme="light"] .navbar .navbar-brand,
html[data-theme="light"] .navbar .nav-link {
    color: var(--site-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] .navbar-brand,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .dropdown-item {
    color: var(--site-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme="light"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:hover {
    background: var(--site-surface-raised) !important;
    color: var(--site-text) !important;
}

html[data-theme="light"] .metric-item,
html[data-theme="light"] .dimension-heading,
html[data-theme="light"] .tree-item,
html[data-theme="light"] .library-empty {
    color: var(--site-muted) !important;
}

html[data-theme="dark"] .collaboration-upload-panel,
html[data-theme="dark"] .collaboration-card,
html[data-theme="dark"] .collaboration-comments,
html[data-theme="dark"] .collaboration-comment-list li,
html[data-theme="dark"] .gallery-card,
html[data-theme="dark"] main.center>section {
    background: var(--site-surface) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="light"] .collaboration-upload-panel,
html[data-theme="light"] .collaboration-card,
html[data-theme="light"] .collaboration-comments,
html[data-theme="light"] .collaboration-comment-list li,
html[data-theme="light"] .gallery-card,
html[data-theme="light"] main.center>section {
    background: var(--site-surface) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="light"] .collaboration-upload-panel h2,
html[data-theme="light"] .collaboration-card h3,
html[data-theme="light"] .gallery-card h3,
html[data-theme="light"] .gallery-card p,
html[data-theme="light"] .gallery-card li {
    color: var(--site-text) !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control {
    color: var(--site-text) !important;
    background-color: var(--site-surface-raised) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .form-control {
    color: var(--site-text) !important;
    background-color: #ffffff !important;
    border-color: var(--site-border) !important;
}

html[data-theme="light"] .page-pagination a {
    color: #34432f !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] .produk-kaart,
html[data-theme="dark"] .bestelling {
    background: var(--site-surface) !important;
    border-color: var(--site-border) !important;
    color: var(--site-text) !important;
}

html[data-theme="dark"] .produk-kaart a,
html[data-theme="dark"] .produk-kaart a:visited,
html[data-theme="dark"] .produk-kaart h2,
html[data-theme="dark"] .produk-detail h1,
html[data-theme="dark"] .produk-detail h2 {
    color: var(--site-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] .produk-prys {
    color: var(--site-accent) !important;
}

html,
html[data-theme="dark"] {
    min-height: 100%;
    background: #000000 !important;
}

body,
html[data-theme="dark"] body {
    min-height: 100vh;
    background-color: #000000 !important;
    background-image:
        radial-gradient(1px 1px at 19px 31px, #fff 98%, transparent 100%),
        radial-gradient(1px 1px at 73px 84px, #dce9ff 98%, transparent 100%),
        radial-gradient(1.5px 1.5px at 142px 27px, #fff 98%, transparent 100%),
        radial-gradient(1px 1px at 181px 116px, #dce9ff 98%, transparent 100%) !important;
    background-size: 220px 160px !important;
    background-attachment: fixed !important;
    color: #ffffff !important;
}

body,
body * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body * {
    background-color: transparent !important;
    background-image: none !important;
}

html[data-theme] body :is(
    .navbar,
    .dropdown-menu,
    .collaboration-upload-panel,
    .collaboration-card,
    .collaboration-comments,
    .gallery-card,
    .produk-kaart,
    .bestelling,
    .toolbar-wrapper,
    .toolbar-scroll-track,
    button,
    .btn,
    input,
    textarea,
    select
) {
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html[data-theme] body :is(.navbar, .dropdown-menu, .navbar-nav .nav-link, .betaling-beeld) {
    background-color: rgba(255, 90, 0, 0.3) !important;
}

html[data-theme] body img.produk-beeld-v1 {
    background-color: rgba(255, 90, 0, 0.3) !important;
}