html.dark {
	--color-bg: #2b2b2b;
	--color-text: #fafafa;

	/* === TEXT COLORS === */
	--color-text-primary: #e2e2e2;
	--color-text-secondary: #a0a0a0;
	--color-text-body: #cacaca;
	--color-text-heading: #f0f6fc;
	--color-text-muted: #707070;
	--color-text-inverse: #000000;

	--color-text-figure-caption: #ffffff;
	--color-text-figure-credit: #c0c0c0;

	/* === BACKGROUND COLORS === */
	--color-bg-primary: #282828;
	--color-bg-secondary: #212121;
	--color-bg-tertiary: #2b2b2b;
	--color-bg-overlay: rgba(0, 0, 0, 0.7);
	--color-bg-accent: #2b2b2b;

	/* === SURFACE COLORS === */
	--color-surface: #2b2b2b;
	--color-surface-elevated: #2b2b2b;
	--color-surface-hover: #474747;
	--color-surface-active: #666666;


	/* === BORDER COLORS === */
	--color-border-primary: #3b3b3b;
	--color-border-secondary: #2b2b2b;
	--color-border-accent: #ffffff;
	--color-border-focus: #ffffff;

	/* === filter COLORS === */
	--color-filter-text: #ffffff;
	--color-filter-text-active: #000000;
	--color-filter-text-hover: #000000;
	--color-filter-border: #c0c0c0;
	--color-filter-bg-hover: #437369;
	--color-filter-bg-active: #ffffff;

	--color-group-line: #e0e0e0;

	/* === BRAND COLORS === */
	--color-primary: #a8a8a8;
	--color-primary-hover: #919191;
	--color-primary-light: #c4c4c4;
	--color-secondary: #919191;
	--color-tertiary: #808080;
	--color-quaternary: #6b6b6b;
	--color-quinary: #3b3b3b;

	/* === LINKS === */
	--color-link: #d0d0d0;
	--color-link-hover: #ffffff;
	--color-link-visited: #b0b0b0;
	--color-link-active: #f0f0f0;

	/* === STATE COLORS === */
	--color-error: #f85149;
	--color-error-bg: #3c1618;
	--color-success: #56d364;
	--color-warning: #d29922;
	--color-info: #58a6ff;

	/* === COMPONENT SPECIFIC === */
	--color-tag-bg: #474747;
	--color-tag-text: #e8e8e8;
	--color-logo-hover: rgba(255, 255, 255, 0.8);

	/* === MD === */
	--color-code-bg: #606060;
	--color-table-line: #606060;


	/* === MENU COLORS === */
	--color-menu-text: #d9d9d9;
	--color-menu-text-hover: #f0f0f0;
	--color-menu-text-active: #cbcbcb;
	--color-menu-bg: #212121;
	--color-menu-bg-hover: #3a3a3a;
	--color-menu-shadow: rgba(0, 0, 0, 0.3);
	--color-menu-underline: #ffffff;
	--color-menu-underline-sub: #ebebeb;
	--color-menu-underline-active: #ffffff;
	--color-menu-mobile-bg: #212121;
	--color-menu-mobile-border: #303030;
	--color-menu-mobile-active: #ffffff;
	--color-menu-mobile-active-sub: #e0e0e0;

	/* === FOOTER COLORS === */
	--color-footer-bg: #1a1a1a;
	--color-footer-text: #909090;
	--color-footer-text-hover: #cacaca;
	--color-footer-text-active: #e6e6e6;
	--color-footer-border: #30363d;
	--color-footer-underline: #e6e6e6;

	/* === SHADOWS === */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 2px 16px rgba(0, 0, 0, 0.3);
	--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
	--shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.4);
	--shadow-menu: -2px 0 20px rgba(0, 0, 0, 0.4);
}