:root {
	color-scheme: only dark;
	--color-bg: #000;
	--color-accent-bg: #3c3c3c;
	--color-accent-bg-hover: #525252;
    --color-text: #ffffff;
    --color-text--rgb: 255, 255, 255;
    --color-border: #ffffff40;
    --color-button-bg: #ffffff;
    --color-button-text: #1e1e1e;
    --color-accent-bg: #3c3c3c;
    --color-form-bg: #ffffff0d;
    --color-form-bg--rgb: 255, 255, 255;
    --color-form-placeholder: #ffffff66;
    --color-form-placeholder--rgb: 255, 255, 255; 
    --color-contrast-menu-text-hover: #c6c6c6;
    --color-contrast-menu-text-hover--rgb: 198, 198, 198;
	--color-header: #ffffff;
}
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #000;
		--color-accent-bg: #3c3c3c;
		--color-accent-bg-hover: #525252;
        --color-text: #ffffff;
        --color-text--rgb: 255, 255, 255;
        --color-border: #ffffff40;
        --color-button-bg: #ffffff;
        --color-button-text: #1e1e1e;
        --color-accent-bg: #3c3c3c;
        --color-form-bg: #ffffff0d;
        --color-form-bg--rgb: 255, 255, 255;
        --color-form-placeholder: #ffffff66;
        --color-form-placeholder--rgb: 255, 255, 255;  
		--color-contrast-menu-text-hover: #c6c6c6;
        --color-contrast-menu-text-hover--rgb: 198, 198, 198;
		--color-header: #ffffff;
    }
}
body[color-scheme="dark"] {
    --color-bg: #000;
	--color-accent-bg: #3c3c3c;
	--color-accent-bg-hover: #525252;
    --color-text: #ffffff;
    --color-text--rgb: 255, 255, 255;
    --color-border: #ffffff40;
    --color-button-bg: #ffffff;
    --color-button-text: #1e1e1e;
    --color-accent-bg: #3c3c3c;
    --color-form-bg: #ffffff0d;
    --color-form-bg--rgb: 255, 255, 255;
    --color-form-placeholder: #ffffff66;
    --color-form-placeholder--rgb: 255, 255, 255;
    --color-contrast-menu-text-hover: #c6c6c6;
    --color-contrast-menu-text-hover--rgb: 198, 198, 198;		
  
}
body[color-scheme="light"] {
    --color-bg: #000;
	--color-accent-bg: #3c3c3c;
    --color-text: #ffffff;
    --color-text--rgb: 255, 255, 255;
    --color-border: #ffffff40;
    --color-button-bg: #ffffff;
    --color-button-text: #1e1e1e;
    --color-accent-bg: #3c3c3c;
    --color-form-bg: #ffffff0d;
    --color-form-bg--rgb: 255, 255, 255;
    --color-form-placeholder: #ffffff66;
    --color-form-placeholder--rgb: 255, 255, 255;  
}
body {
    --color-text-muted: rgba(var(--color-text--rgb), 0.75);
    --color-text-light: rgba(var(--color-text--rgb), 0.4);
    --color-menu-bg: var(--color-bg);
    --color-menu-text: var(--color-text);
    --color-menu-text-muted: rgba(var(--color-text--rgb), 0.6);
    --color-menu-separator: rgba(var(--color-text--rgb), 0.5);
    --color-menu-text-hover: var(--color-menu-text-muted);
    --color-form-underline: var(--color-border);
    --color-checkbox-bg: var(--color-button-bg);
    --color-checkbox-text: var(--color-button-text);
}