:root {
    color-scheme: light dark;
}

html:not(.specificity) {
    color-scheme: light;
}

html body {
    --global-light-toggle-switch: #F7FAFC;
    --global-dark-toggle-switch: #2D3748;
}

body.color-switch-dark {
    color-scheme: dark;
    --global-gray-400: #2f3336;
    --global-gray-500: #6B7280;
    --global-palette1: #ffd21d;
    --global-palette2: #e7ba0a;
    --global-palette3: #f8f9fb;
    --global-palette4: #d9d9d9;
    --global-palette5: #d9d9d9;
    --global-palette6: #d9d9d9;
    --global-palette7: #212121;
    --global-palette8: #0f0f0f;
    --global-palette9: #181818;
    --global-palette9rgb: 24, 24, 24;
    --global-palette-highlight: var(--global-palette1);
    --global-palette-highlight-alt: var(--global-palette2);
    --global-palette-highlight-alt2: var(--global-palette9);
    --global-palette-btn-bg: var(--global-palette1);
    --global-palette-btn-bg-hover: var(--global-palette2);
    --global-palette-btn: var(--global-palette9);
    --global-palette-btn-hover: var(--global-palette9);
    --tec-color-background-events: var(--global-palette9);
    --tec-color-text-event-date: var(--global-palette3);
    --tec-color-text-event-title: var(--global-palette3);
    --tec-color-text-events-title: var(--global-palette3);
    --tec-color-background-view-selector-list-item-hover: var(--global-palette7);
    --tec-color-background-secondary: var(--global-palette7);
    --tec-color-link-primary: var(--global-palette3);
    --tec-color-icon-active: var(--global-palette3);
    --tec-color-day-marker-month: var(--global-palette4);
    --tec-color-border-active-month-grid-hover: var(--global-palette5);
    --tec-color-accent-primary: var(--global-palette1);
}

.base-color-palette-fixed-switcher {
    bottom: 30px;
}

.base-color-palette-fixed-switcher.kcpf-position-right {
    right: 30px;
}

.base-color-palette-fixed-switcher.kcpf-position-left {
    left: 30px;
}

.base-color-palette-fixed-switcher .base-color-palette-switcher.kcps-style-switch.kcps-type-icon button.base-color-palette-toggle:after {
    width: calc(1.2em + .3em);
    height: calc(1.2em + .3em);
}

.base-color-palette-fixed-switcher .base-color-palette-switcher button.base-color-palette-toggle .base-color-palette-icon {
    font-size: 1.2em;
}

.base-color-palette-header-switcher {
    --global-light-toggle-switch: #F7FAFC;
    --global-dark-toggle-switch: #2D3748;
}

.base-color-palette-header-switcher .base-color-palette-switcher.kcps-style-switch.kcps-type-icon button.base-color-palette-toggle:after {
    width: calc(1.2em + .3em);
    height: calc(1.2em + .3em);
}

.base-color-palette-header-switcher .base-color-palette-switcher button.base-color-palette-toggle .base-color-palette-icon {
    font-size: 1.2em;
}

.base-color-palette-mobile-switcher {
    --global-light-toggle-switch: #F7FAFC;
    --global-dark-toggle-switch: #2D3748;
}

.base-color-palette-mobile-switcher .base-color-palette-switcher.kcps-style-switch.kcps-type-icon button.base-color-palette-toggle:after {
    width: calc(1.2em + .3em);
    height: calc(1.2em + .3em);
}

.base-color-palette-mobile-switcher .base-color-palette-switcher button.base-color-palette-toggle .base-color-palette-icon {
    font-size: 1.2em;
}

.base-color-palette-footer-switcher {
    --global-light-toggle-switch: #F7FAFC;
    --global-dark-toggle-switch: #2D3748;
}

.base-color-palette-footer-switcher .base-color-palette-switcher.kcps-style-switch.kcps-type-icon button.base-color-palette-toggle:after {
    width: calc(1.2em + .3em);
    height: calc(1.2em + .3em);
}

.base-color-palette-footer-switcher .base-color-palette-switcher button.base-color-palette-toggle .base-color-palette-icon {
    font-size: 1.2em;
}