/**
 * BeatLatin design tokens — Apple Music–aligned sizes + BeatLatin accent.
 */
:root,
[data-theme="light"] {
	--bl-accent: #ac0505;
	--bl-accent-soft: rgba(172, 5, 5, 0.12);
	--bl-bg: #f5f5f7;
	--bl-bg-page: #f0f0f2;
	--bl-bg-elevated: #ffffff;
	--bl-text: rgba(0, 0, 0, 0.88);
	--bl-text-secondary: rgba(0, 0, 0, 0.56);
	--bl-text-tertiary: rgba(0, 0, 0, 0.4);
	--bl-text-quaternary: rgba(0, 0, 0, 0.2);
	--bl-fill: rgba(0, 0, 0, 0.06);
	--bl-fill-hover: rgba(0, 0, 0, 0.1);
	--bl-fill-strong: rgba(0, 0, 0, 0.14);
	--bl-border: rgba(0, 0, 0, 0.12);
	--bl-border-strong: rgba(0, 0, 0, 0.18);
	--bl-sidebar-bg: rgba(255, 255, 255, 0.72);
	--bl-chrome-bg: rgba(255, 255, 255, 0.78);
	--bl-chrome-solid: #ebebed;
	--bl-search-bg: rgba(0, 0, 0, 0.06);
	--bl-player-progress: rgba(0, 0, 0, 0.12);
	--bl-player-progress-fill: rgba(0, 0, 0, 0.88);
	--bl-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
	--bl-shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.08);
	--bl-backdrop: saturate(1.8) blur(20px);
	--bl-icon: rgba(0, 0, 0, 0.72);
	--bl-logo-filter: none;

	--bl-sidebar-w: 260px;
	--bl-nav-w: 244px;
	--bl-topbar-h: 56px;
	--bl-player-h: 56px;
	--bl-radius-nav: 20px;
	--bl-radius-chrome: 1000px;
	--bl-radius-card: 12px;
	--bl-radius-sm: 8px;
	--bl-gap: 12px;
	--bl-pad-main: 24px;
	--bl-z-sidebar: 100;
	--bl-z-topbar: 90;
	--bl-z-player: 95;
	--bl-z-dropdown: 200;

	--bl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bl-fs-page: 34px;
	--bl-lh-page: 40px;
	--bl-fs-shelf: 17px;
	--bl-lh-shelf: 22px;
	--bl-fs-nav: 14px;
	--bl-lh-nav: 20px;
	--bl-fs-track: 13px;
	--bl-lh-track: 16px;
	--bl-fs-sub: 12px;
	--bl-lh-sub: 15px;
	--bl-fs-micro: 11px;
}

[data-theme="dark"] {
	--bl-bg: #1f1f1f;
	--bl-bg-page: #1f1f1f;
	--bl-bg-elevated: #2c2c2e;
	--bl-text: rgba(255, 255, 255, 0.92);
	--bl-text-secondary: rgba(255, 255, 255, 0.64);
	--bl-text-tertiary: rgba(255, 255, 255, 0.4);
	--bl-text-quaternary: rgba(255, 255, 255, 0.18);
	--bl-fill: rgba(255, 255, 255, 0.08);
	--bl-fill-hover: rgba(255, 255, 255, 0.12);
	--bl-fill-strong: rgba(255, 255, 255, 0.16);
	--bl-border: rgba(255, 255, 255, 0.2);
	--bl-border-strong: rgba(255, 255, 255, 0.28);
	--bl-sidebar-bg: rgba(38, 38, 40, 0.6);
	--bl-chrome-bg: rgba(40, 40, 42, 0.72);
	--bl-chrome-solid: #2a2a2c;
	--bl-search-bg: rgba(255, 255, 255, 0.08);
	--bl-player-progress: rgba(255, 255, 255, 0.16);
	--bl-player-progress-fill: rgba(255, 255, 255, 0.92);
	--bl-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
	--bl-shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.25);
	--bl-backdrop: saturate(2.2) blur(16px);
	--bl-icon: rgba(255, 255, 255, 0.85);
	--bl-logo-filter: none;
	--bl-accent-soft: rgba(172, 5, 5, 0.22);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	height: 100%;
	-webkit-text-size-adjust: 100%;
}

body.beatlatin-body {
	margin: 0;
	min-height: 100%;
	font-family: var(--bl-font);
	font-size: var(--bl-fs-track);
	line-height: var(--bl-lh-track);
	font-weight: 400;
	color: var(--bl-text);
	background: var(--bl-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.beatlatin-body a {
	color: inherit;
	text-decoration: none;
}

body.beatlatin-body button {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	color: inherit;
	padding: 0;
}

body.beatlatin-body img {
	max-width: 100%;
	height: auto;
	display: block;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}