:root:not(.theme-dark){
	--tv-color-platform-background: #f8f8f8; /* lightest shade for main background */
	--tv-color-pane-background: #ffffff; /* slightly darker shade for pane backgrounds */
	--tv-color-toolbar-button-background-hover: #f0f0f0;
	--tv-color-toolbar-button-background-expanded: #f0f0f0;
	--tv-color-toolbar-button-background-active: #e0e0e0;
	--tv-color-toolbar-button-background-active-hover: #f0f0f0;
	--tv-color-toolbar-button-text: #333333; /* dark gray for text */
	--tv-color-toolbar-button-text-hover: #000000; /* black for hovered text */
	--tv-color-toolbar-button-text-active: #000000;
	--tv-color-toolbar-button-text-active-hover: #000000;
	--tv-color-item-active-text: #000000; /* black for active item text */
	--tv-color-toolbar-toggle-button-background-active: #e0e0e0;
	--tv-color-toolbar-toggle-button-background-active-hover: #f0f0f0;
	--tv-color-toolbar-divider-background: #e0e0e0;
	--tv-color-toolbar-save-layout-loader: #333333;

	--tv-color-popup-background: #ffffff; /* light background for popups */
	--tv-color-popup-element-text: #333333;
	--tv-color-popup-element-text-hover: #000000;
	--tv-color-popup-element-background-hover: #f0f0f0;
	--tv-color-popup-element-divider-background: #e0e0e0;
	--tv-color-popup-element-secondary-text: #666666;
	--tv-color-popup-element-hint-text: #666666;
	--tv-color-popup-element-text-active: #000000;
	--tv-color-popup-element-background-active: #e0e0e0;
	--tv-color-popup-element-toolbox-text: #333333;
	--tv-color-popup-element-toolbox-text-hover: #000000;
	--tv-color-popup-element-toolbox-text-active-hover: #000000;
	--tv-color-popup-element-toolbox-background-hover: #f0f0f0;
	--tv-color-popup-element-toolbox-background-active-hover: #e0e0e0;
}

.theme-dark:root {
    --tv-color-platform-background: #09090b; /* darkest shade for main background */
    --tv-color-pane-background: #18181b; /* slightly lighter shade for pane backgrounds */
    --tv-color-toolbar-button-background-hover: #27272a;
    --tv-color-toolbar-button-background-expanded: #27272a;
    --tv-color-toolbar-button-background-active: #3f3f46;
    --tv-color-toolbar-button-background-active-hover: #27272a;
    --tv-color-toolbar-button-text: #e4e4e7; /* light gray for text */
    --tv-color-toolbar-button-text-hover: #fafafa; /* very light gray for hovered text */
    --tv-color-toolbar-button-text-active: #f4f4f5;
    --tv-color-toolbar-button-text-active-hover: #f4f4f5;
    --tv-color-item-active-text: #d4d4d8; /* light gray for active item text */
    --tv-color-toolbar-toggle-button-background-active: #3f3f46;
    --tv-color-toolbar-toggle-button-background-active-hover: #27272a;
    --tv-color-toolbar-divider-background: #0f0f13;
    --tv-color-toolbar-save-layout-loader: #a1a1aa;

    --tv-color-popup-background: #0f0f13; /* dark background for popups */
    --tv-color-popup-element-text: #e4e4e7;
    --tv-color-popup-element-text-hover: #fafafa;
    --tv-color-popup-element-background-hover: #27272a;
    --tv-color-popup-element-divider-background: #18181b;
    --tv-color-popup-element-secondary-text: #d4d4d8;
    --tv-color-popup-element-hint-text: #d4d4d8;
    --tv-color-popup-element-text-active: #fafafa;
    --tv-color-popup-element-background-active: #3f3f46;
    --tv-color-popup-element-toolbox-text: #e4e4e7;
    --tv-color-popup-element-toolbox-text-hover: #fafafa;
    --tv-color-popup-element-toolbox-text-active-hover: #fafafa;
    --tv-color-popup-element-toolbox-background-hover: #27272a;
    --tv-color-popup-element-toolbox-background-active-hover: #3f3f46;
}
