:root {
	/* --- Backgrounds --- */
	--color-bg-primary: #232321;
	--color-bg-secondary: #2B2B26;
	--color-bg-tertiary: #39392F;
	--color-bg-hover: #404035;

	/* --- Text --- */
	--color-text-primary: #ffffff;
	--color-text-secondary: #a0a0a0;

	/* --- Accents --- */
	--color-accent-primary: #F0E474;
	--color-accent-secondary: #666243;
	--color-accent-text: #48473c;
	--color-accent-hover: #716c4a;
	
	/* --- Accents for gradients --- */
	--color-accent-primary-45: rgba(240, 228, 116, 0.45);
	--color-accent-primary-15: rgba(240, 228, 116, 0.15);

	/* --- Popover Colors --- */
	--color-popover-bg: #18181b;
	--color-popover-title: #ffffff;
	--color-popover-text: #a1a1aa;
	--color-popover-accent: #27272a;
	--color-popover-shadow: rgba(0, 0, 0, 0.55);
	--color-popover-banner-bg: rgba(0, 0, 0, 0.2);
	--color-popover-hover-bg: rgba(255, 255, 255, 0.08);

	/* --- Tooltip Colors --- */
	--color-tooltip-bg: #e6e2d9;
	--color-tooltip-text: #1c1b17;
	--color-tooltip-shadow: rgba(0, 0, 0, 0.25);

	/* --- Overlays & Shadows --- */
	--color-overlay-dark: rgba(0, 0, 0, 0.25);
	--color-border-subtle: rgba(255, 255, 255, 0.08);
	--color-lastfm-icon: rgba(255, 255, 255, 0.9);
	--color-lastfm-icon-drop-shadow: rgba(0, 0, 0, 0.6);
	--color-dropdown-menu-shadow: rgba(0, 0, 0, 0.45);

	/* --- Ripple Effect --- */
	--color-ripple-start: rgba(255, 255, 255, 0.18);
	--color-ripple-mid: rgba(255, 255, 255, 0.08);

	/* --- MD3 / System fallback --- */
	--md-sys-color-on-surface-variant: #c8c7b7;

	/* --- Utilities --- */
	--color-grid-line: rgba(255, 255, 255, 0.03);
	--color-transparent: transparent;
}