$fresk-dm-tokens: (
    "primary-contrast",
    "primary-text-hover",
    "secondary-contrast",
    "secondary-text-hover",
    "surface",
    "surface-rgb",
    "page-rgb",
    "surface-recessed",
    "surface-strong",
    "surface-hover",
    "text",
    "text-emphasis",
    "text-muted",
    "border",
    "border-strong",
    "border-alpha",
    "icon-filter"
);

:root,
[data-bs-theme="light"] {
    --fresk-primary: #{$brand-primary};
    --fresk-primary-rgb: #{to-rgb($brand-primary)};
    --fresk-primary-text: #{$brand-primary};
    --fresk-primary-ui: #{$brand-primary};
    --fresk-secondary: #{$brand-secondary};
    --fresk-secondary-rgb: #{to-rgb($brand-secondary)};
    --fresk-secondary-text: #{$brand-secondary};
    --fresk-secondary-ui: #{$brand-secondary};
    --fresk-page: #{$backgroundcolor};
    --fresk-navbar-bg: #{$backgroundmenucolor};
    --fresk-navbar-text: #{$lettermenucolor};
    --fresk-navbar-icon-filler: #{$iconfillermenucolor};
    --fresk-navbar-icon: #{$iconmenucolor};
    --fresk-navbar-icon-filler-hover: #{$iconfillermenucolorhover};
    --fresk-navbar-icon-hover: #{$iconmenucolorhover};
    --fresk-navbar-icon-filler-active: #{$iconfillermenucoloractive};
    --fresk-navbar-icon-active: #{$iconmenucoloractive};
    --fresk-drawer-bg: #{$backgrounddrawerscolor};
    --fresk-drawer-text: #{$letterdrawerscolor};
    --fresk-drawer-icon-filler: #{$iconfillerdrawerscolor};
    --fresk-drawer-icon: #{$icondrawerscolor};
    --fresk-drawer-icon-filler-hover: #{$iconfillerdrawerscolorhover};
    --fresk-drawer-icon-hover: #{$icondrawerscolorhover};
    --fresk-header2-bg: #{$header2bg};
}

@if $fresk-dark-mode {
    [data-bs-theme="light"] {
        @each $token in $fresk-dm-tokens {
            --fresk-dm-#{$token}: initial;
        }
    }
}

@include fresk-dark-root {
    --fresk-primary: #{$fresk-dark-primary};
    --fresk-primary-rgb: #{to-rgb($fresk-dark-primary)};
    --fresk-primary-text: #{$fresk-dark-primary-text};
    --fresk-primary-ui: #{$fresk-dark-primary-ui};
    --fresk-secondary: #{$fresk-dark-secondary};
    --fresk-secondary-rgb: #{to-rgb($fresk-dark-secondary)};
    --fresk-secondary-text: #{$fresk-dark-secondary-text};
    --fresk-secondary-ui: #{$fresk-dark-secondary-ui};
    --fresk-page: #{$fresk-dark-page};
    --fresk-navbar-bg: #{$fresk-dark-navbar-bg};
    --fresk-navbar-text: #{$fresk-dark-navbar-text};
    --fresk-navbar-icon-filler: #{$fresk-dark-navbar-icon-filler};
    --fresk-navbar-icon: #{$fresk-dark-navbar-icon};
    --fresk-navbar-icon-filler-hover: #{$fresk-dark-navbar-icon-filler-hover};
    --fresk-navbar-icon-hover: #{$fresk-dark-navbar-icon-hover};
    --fresk-navbar-icon-filler-active: #{$fresk-dark-navbar-icon-filler-active};
    --fresk-navbar-icon-active: #{$fresk-dark-navbar-icon-active};
    --fresk-drawer-bg: #{$fresk-dark-drawer-bg};
    --fresk-drawer-text: #{$fresk-dark-drawer-text};
    --fresk-drawer-icon-filler: #{$fresk-dark-drawer-icon-filler};
    --fresk-drawer-icon: #{$fresk-dark-drawer-icon};
    --fresk-drawer-icon-filler-hover: #{$fresk-dark-drawer-icon-filler-hover};
    --fresk-drawer-icon-hover: #{$fresk-dark-drawer-icon-hover};
    --fresk-header2-bg: #{$fresk-dark-header2-bg};
    --fresk-dm-primary-contrast: #{$fresk-dark-primary-contrast};
    --fresk-dm-primary-text-hover: #{$fresk-dark-primary-text-hover};
    --fresk-dm-secondary-contrast: #{$fresk-dark-secondary-contrast};
    --fresk-dm-secondary-text-hover: #{$fresk-dark-secondary-text-hover};
    --fresk-dm-surface: #{$fresk-dark-surface};
    --fresk-dm-surface-rgb: #{to-rgb($fresk-dark-surface)};
    --fresk-dm-page-rgb: #{to-rgb($fresk-dark-page)};
    --fresk-dm-surface-recessed: #{$fresk-dark-surface-recessed};
    --fresk-dm-surface-strong: #{$fresk-dark-surface-strong};
    --fresk-dm-surface-hover: #{$fresk-dark-surface-hover};
    --fresk-dm-text: #{$fresk-dark-text};
    --fresk-dm-text-emphasis: #{$fresk-dark-text-emphasis};
    --fresk-dm-text-muted: #{$fresk-dark-text-muted};
    --fresk-dm-border: #{$fresk-dark-border};
    --fresk-dm-border-strong: #{$fresk-dark-border-strong};
    --fresk-dm-border-alpha: rgba(255, 255, 255, .15);
    --fresk-dm-icon-filter: invert(1) hue-rotate(180deg);
}