:root {
	--color-bg: #ffffff;
	--color-text: #000000;

	/* === TEXT COLORS === */
	--color-text-primary: #3a3a3a;
	--color-text-secondary: #787878;
	--color-text-body: #545454;
	--color-text-heading: #2a2a2a;
	--color-text-muted: #b1b1b1;
	--color-text-inverse: #ffffff;

	--color-text-figure-caption: #000000;
	--color-text-figure-credit: #303030;

	/* === BACKGROUND COLORS === */
	--color-bg-primary: #ffffff;
	--color-bg-secondary: #f8f8f8;
	--color-bg-tertiary: #e9e9e9;
	--color-bg-overlay: rgba(0, 0, 0, 0.5);
	--color-bg-accent: #f0f0f0;

	/* === SURFACE COLORS === */
	--color-surface: #ffffff;
	--color-surface-elevated: #ffffff;
	--color-surface-hover: #f8f8f8;
	--color-surface-active: #e9e9e9;


	/* === BORDER COLORS === */
	--color-border-primary: #e1e1e1;
	--color-border-secondary: #d4d4d4;
	--color-border-accent: #5c5c5c;
	--color-border-focus: #5c5c5c;

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

	--color-group-line: #303030;

	/* === BRAND COLORS  === */
	--color-primary: #5c5c5c;
	--color-primary-hover: #474747;
	--color-primary-light: #a8a8a8;
	--color-secondary: #404040;
	--color-tertiary: #262626;
	--color-quaternary: #0b0b0b;
	--color-quinary: #000000;

	/* === LINKS === */
	--color-link: #5c5c5c;
	--color-link-hover: #3a3a3a;
	--color-link-visited: #6b6b6b;
	--color-link-active: #2a2a2a;

	/* === STATE COLORS === */
	--color-error: #d73a49;
	--color-error-bg: #ffeaea;
	--color-success: #28a745;
	--color-warning: #ffc107;
	--color-info: #17a2b8;

	/* === COMPONENT SPECIFIC === */
	--color-tag-bg: #f0f0f0;
	--color-tag-text: #666666;
	--color-logo-hover: rgba(0, 0, 0, 0.8);

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


	/* === MENU COLORS === */
	--color-menu-text: #333333;
	--color-menu-text-hover: #202020;
	--color-menu-text-active: #606060;
	--color-menu-bg: #ffffff;
	--color-menu-bg-hover: #f8f8f8;
	--color-menu-shadow: rgba(0, 0, 0, 0.15); /* bleibt gleich, da schon grau */
	--color-menu-underline: #050505;
	--color-menu-underline-sub: #c0c0c0;
	--color-menu-underline-active: #606060;
	--color-menu-mobile-bg: #ffffff;
	--color-menu-mobile-border: #e1e1e1;
	--color-menu-mobile-active: #b8b8b8;
	--color-menu-mobile-active-sub: #474747;

	/* === FOOTER COLORS === */
	--color-footer-bg: #f8f8f8;
	--color-footer-text: #666666;
	--color-footer-text-hover: #333333;
	--color-footer-text-active: #5c5c5c;
	--color-footer-border: #e1e1e1;
	--color-footer-underline: #5c5c5c;

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