:root {
	/*
	 * Centralized semantic palette — literal colors live here only.
	 * Primary / Secondary / Accent / Background / Surface / Text / Border
	 */
	--color-primary: #4F7DB8;
	--color-secondary: #2F5D9A;
	--color-accent: #C62828;
	--color-background: #F5F9FD;
	--color-surface: #ffffff;
	--color-text: #1F2937;
	--color-border: #D6E0EA;

	/* Content on filled regions (no extra literals) */
	--color-on-primary: var(--color-surface);
	--color-on-accent: var(--color-surface);

	/* Derived tones — color-mix + semantic vars only */
	--color-accent-strong: color-mix(in srgb, var(--color-accent) 78%, var(--color-text) 22%);
	--color-accent-deep: color-mix(in srgb, var(--color-accent) 52%, var(--color-text) 48%);
	--color-primary-soft-glow: color-mix(in srgb, var(--color-primary) 22%, transparent);
	--color-accent-soft-glow: color-mix(in srgb, var(--color-accent) 18%, transparent);
	--color-secondary-soft-glow: color-mix(in srgb, var(--color-secondary) 12%, transparent);
	--color-text-soft-shadow: color-mix(in srgb, var(--color-text) 16%, transparent);
	--color-surface-veil-08: color-mix(in srgb, var(--color-surface) 8%, transparent);
	--color-surface-veil-10: color-mix(in srgb, var(--color-surface) 10%, transparent);
	--color-surface-veil-14: color-mix(in srgb, var(--color-surface) 14%, transparent);
	--color-surface-veil-25: color-mix(in srgb, var(--color-surface) 25%, transparent);
	--color-surface-veil-35: color-mix(in srgb, var(--color-surface) 35%, transparent);
	--color-surface-veil-92: color-mix(in srgb, var(--color-surface) 92%, transparent);
	--color-accent-veil-08: color-mix(in srgb, var(--color-accent) 8%, transparent);
	--color-accent-veil-92: color-mix(in srgb, var(--color-accent) 92%, transparent);
	--color-nav-ink: color-mix(in srgb, var(--color-surface) 97%, var(--color-border) 3%);

	/* Admin data table — maps to semantic palette */
	--admin-table-header-bg: color-mix(in srgb, var(--color-secondary) 42%, var(--color-text) 58%);
	--admin-table-header-color: var(--color-on-primary);
	--admin-table-border-color: var(--color-border);
	--admin-table-row-border-color: color-mix(in srgb, var(--color-border) 52%, var(--color-surface) 48%);
	--admin-table-shell-bg: var(--color-surface);
	--admin-table-row-hover-bg: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface) 91%);
	--admin-table-footer-bg: var(--color-background);
	--admin-table-text-muted: color-mix(in srgb, var(--color-text) 58%, var(--color-border) 42%);
	--admin-table-text-strong: var(--color-text);
	--admin-table-footer-mid-text: color-mix(in srgb, var(--color-text) 74%, var(--color-border) 26%);
	--admin-table-pagination-disabled: color-mix(in srgb, var(--color-border) 66%, var(--color-background) 34%);

	/* Floating header — gradient + glass (semantic + derived only) */
	--floating-header-bg-1: var(--color-primary);
	--floating-header-bg-2: var(--color-secondary);
	--floating-header-bg-3: var(--color-accent-strong);
	--floating-header-bg-4: var(--color-accent-deep);
	--floating-header-border: var(--color-surface-veil-14);
	--floating-header-shadow-1: var(--color-primary-soft-glow);
	--floating-header-shadow-2: var(--color-accent-soft-glow);
	--floating-header-overlay-1: var(--color-surface-veil-10);
	--floating-header-overlay-2: var(--color-accent-veil-08);
	--floating-header-hover-bg: var(--color-accent-veil-92);
	--floating-header-nav-text: var(--color-nav-ink);
	--floating-header-brand-text: var(--color-on-primary);
	--floating-header-brand-shadow: var(--color-surface-veil-25);

	/* Floating navbar — dropdowns & chrome */
	--floating-header-dropdown-hover-bg: var(--color-accent);
	--floating-header-dropdown-hover-text: var(--color-on-accent);
	--floating-header-dropdown-menu-shadow: var(--color-text-soft-shadow);
	--floating-header-toggle-border: var(--color-surface-veil-35);
	--floating-header-toggle-bg: var(--color-surface-veil-08);
	--floating-header-icon-bar: var(--color-surface);
	--floating-header-mobile-submenu-bg: var(--color-surface-veil-92);
	--floating-header-mobile-submenu-shadow: var(--color-secondary-soft-glow);
}