:root {
	--mf-bg: oklch(12.5% 0.004 95);
	--mf-elevated: oklch(16% 0.005 95);

	--mf-text: oklch(93% 0.004 95);
	--mf-text-2: oklch(78% 0.006 95);
	--mf-text-3: oklch(62% 0.007 95);
	--mf-text-4: oklch(46% 0.006 95);

	--mf-surface: oklch(15.5% 0.005 95);
	--mf-surface-2: rgba(255, 255, 255, 0.05);
	--mf-surface-hover: rgba(255, 255, 255, 0.08);

	--mf-border: rgba(255, 255, 255, 0.07);
	--mf-border-strong: rgba(255, 255, 255, 0.13);
	--mf-track: rgba(255, 255, 255, 0.12);

	--mf-accent: oklch(60% 0.1 145);
	--mf-accent-soft: color-mix(in oklch, var(--mf-accent) 80%, transparent);
	--mf-accent-glow: color-mix(in oklch, var(--mf-accent) 45%, transparent);
	--mf-accent-dim: color-mix(in oklch, var(--mf-accent) 22%, transparent);

	--mf-scrim: #000000;
	--mf-on-art: #fefdfb;

	--mf-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	--mf-sidebar-w: 288px;
	--mf-nav-h: 60px;
	--mf-player-h: 64px;
	--mf-safe-b: env(safe-area-inset-bottom, 0px);
}

@media (width >= 48rem) {
	:root {
		--mf-nav-h: 0px;
		--mf-player-h: 92px;
	}
}