:root {
    --bgColor: var(--bg);
    --bgGradient: var(--bg);
    --headerBg: var(--chrome);
    --headerControlHoverBg: var(--card2);
    --headerControlActiveBg: var(--line);
    --cardBg: var(--card);
    --cardBorder: var(--line);
    --accentLight: var(--accentSoft);
    --accentGlow: var(--accentSoft);
    --squareActive: var(--accent);
    --fgColor: var(--fg);
    --fgColorMuted: var(--fg2);
    --mainAreaBg: var(--bg);
    --dangerColor: var(--danger);
    --dangerColorLight: var(--dangerSoft);
    --dangerColorLightHover: var(--dangerLine);
    --warnColor: var(--warn);
    --warnColorLight: var(--warnSoft);
    --warnColorLightHover: var(--warnLine);
    --successColor: var(--ok);
    --successColorLight: var(--okSoft);
    --successColorLightHover: var(--okLine);
    --infoColor: var(--info);
    --infoColorLight: var(--infoSoft);
    --infoColorLightHover: var(--infoSoft);
    --grayColor: var(--fg3);
    --grayColorLight: var(--sunken);
    --brownThemed: var(--warn);
    --brownColor: var(--warn);
    --brownColorLight: var(--warnSoft);
    --blueThemed: var(--info);
    --adminBgGradient: var(--bg);
    --adminMainBorderColor: var(--line);
    --adminHeaderBg: var(--chrome);
    --adminLoginCardBg: var(--card);
    --sidebarBgColor: var(--chrome);
    --sidebarNavHoverBg: var(--card2);
    --userEmailBgColor: var(--card2);
    --rightPanelBg: var(--bg);
    --leftPanelBg: var(--chrome);
    --dotGridColor: var(--line);
    --loginWrapperBg: var(--card);
    --boxShadow: var(--shadow);
    --errorBox: var(--dangerSoft);
    --infoBoxBg: var(--sunken);
    --inputBgColor: var(--sunken);
    --inputBorderColor: var(--line);
    --inputHoverBorderColor: var(--line2);
    --inputFocusBorderColor: var(--accentLine);
    --inputFocusBgColor: var(--card);
    --inputHoverBoxShadow: transparent;
    --inputFocusBoxShadow: transparent;
    --checkboxSize: 18px;
    --checkboxBgColor: var(--sunken);
    --checkboxBorderColor: var(--line2);
    --checkboxHoverBorderColor: var(--accentLine);
    --checkboxHoverBoxShadowColor: var(--accentSoft);
    --checkboxFocusBorderColor: var(--accent);
    --checkboxFocusBoxShadowColor: var(--accentSoft);
    --checkboxCheckedBgColor: var(--accentFill);
    --checkboxCheckedBorderColor: var(--accentFill);
    --checkboxCheckmarkColor: var(--accentBtnFg);
    --buttonFlatHoverBg: var(--card2);
    --buttonFlatActiveBg: var(--line);
    --btnFlatDangerHoverBg: var(--dangerSoft);
    --btnFlatDangerActiveBg: var(--dangerLine);
    --btnFlatSuccessHoverBg: var(--okSoft);
    --btnFlatSuccessActiveBg: var(--okLine);
    --btnDisabledBg: var(--sunken);
    --btnDangerBg: var(--danger);
    --scrollbarTrack: transparent;
    --scrollbarThumb: var(--line2);
    --scrollbarThumbHover: var(--fg3);
    --scrollbarThumbActive: var(--fg3);
    --notificationTypeInfo: var(--accent);
    --notificationTypeError: var(--danger);
    --notificationTypeSuccess: var(--ok);
    --offcanvasBg: var(--card);
    --offcanvasSectionBorderColor: var(--line);
    --modalBg: var(--card);
    --modalBorder: var(--line);
    --modalHeaderBorder: var(--line);
    --modalFooterBg: var(--sunken);
    --asyncSelectBg: var(--card);
    --asyncSelectDropdownBoxShadow: var(--accentLine);
    --entityListItemBg: var(--card2);
    --entityListItemBgHover: var(--line);
    --fontFamily: var(--fontSans);
    --borderRadius: var(--radiusMd);
    --borderRadiusDouble: var(--radius2xl);
    --scrollbarSize: 8px;
    --scrollbarRadius: var(--radiusFull);
    --sidebarBg: var(--chrome);
}

:root,
[data-theme="dark"] {
    --logoColor: var(--fg);
    --radioInnerColor: var(--accentBtnFg);
    --bubbleColor: rgba(180, 123, 236, 0.45);
    --squareColor: rgba(180, 123, 236, 0.35);
}

[data-theme="light"] {
    --logoColor: var(--accentFill);
    --radioInnerColor: var(--accentFill);
    --bubbleColor: rgba(112, 31, 152, 0.3);
    --squareColor: rgba(112, 31, 152, 0.4);
}