/**
 * BeatLatin brand tokens + shell polish.
 * Colors from production reference (#1f1f1f dark, #d90c0c accent).
 * No decorative red/blue glows on the app background.
 */

:root,
[data-theme="dark"] {
	color-scheme: dark;

	/* Layout */
	--mc-sidebar-width: 220px;
	--mc-player-height: 72px;
	--mc-radius: 8px;

	/* Surfaces — Apple Music–like BeatLatin */
	--mc-bg: #1f1f1f;
	--mc-bg-elevated: #2a2a28;
	--mc-bg-row-hover: #2c2c2a;
	--mc-text: hsla(0, 0%, 100%, 0.92);
	--mc-text-muted: hsla(0, 0%, 100%, 0.64);
	--mc-border: rgba(255, 255, 255, 0.09);
	--mc-accent: #d90c0c;
	--mc-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mc-font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--bl-red: #d90c0c;
	--bl-nav-text: rgba(255, 255, 255, 0.7);
	--bl-nav-hover-bg: rgba(255, 255, 255, 0.065);
	--bl-icon-hover: #ffffff;
	--bl-sidebar-bg: #1e1e1c;
	--bl-input-bg: rgba(255, 255, 255, 0.055);
	--bl-border: rgba(255, 255, 255, 0.09);
	--bl-overlay-bg: rgba(0, 0, 0, 0.68);

	/* Glass materials (production reference) */
	--bl-glass-material-bg: rgba(38, 38, 40, 0.6);
	--bl-glass-material-shadow: rgba(0, 0, 0, 0.45);
	--bl-glass-elevated-fallback: #1e1e1e;
	--bl-glass-elevated-bg: rgba(40, 40, 40, 0.7);
	--bl-glass-elevated-shadow: rgba(0, 0, 0, 0.45);
	--bl-glass-inner-stroke: rgba(255, 255, 255, 0.2);

	/* Global player tokens (reference style.css) */
	--bl-font: var(--mc-font);
	--bl-border-strong: rgba(255, 255, 255, 0.16);
	--bl-player-glass: var(--bl-glass-material-bg);
	--bl-player-glass-shadow: var(--bl-glass-material-shadow);
	--bl-player-icon: rgba(255, 255, 255, 0.85);
	--bl-player-icon-hover: #ffffff;
	--bl-player-text: #ffffff;
	--bl-player-time: rgba(255, 255, 255, 0.88);

	/* Mixes / DJ catalog table tokens */
	--bl-mixes-primary: hsla(0, 0%, 100%, 0.92);
	--bl-mixes-secondary: hsla(0, 0%, 100%, 0.64);
	--bl-featured-photo-bg: #3a3a3c;

	/* Floating shell — Apple Music insets */
	--bl-sidebar-width: 220px;
	--bl-sidebar-speed: 0.38s;
	--bl-shell-inset: 12px;
	--bl-shell-gap: 12px;
	--bl-sidebar-footprint: calc(var(--bl-shell-inset) + var(--bl-sidebar-width) + var(--bl-shell-gap));
	--bl-topbar-height: 58px;
	/* Extra air under floating topbar + bottom breathing room */
	--bl-content-offset: calc(var(--bl-shell-inset) + var(--bl-topbar-height) + 32px);
	--bl-content-bottom: 2.75rem;
	--bl-content-gutter: 12px;
	--bl-radius-lg: 22px;
	--bl-ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* Home shelf bleed / editorial tokens */
	--bl-bleed-left: calc(var(--bl-sidebar-footprint) + var(--bl-content-gutter));
	--bl-bleed-right: var(--bl-content-gutter);
	--bl-shelf-gap-editorial: 20px;
	--bl-shelf-arrow-offset: 38px;
	/* Apple Music systemPrimary / systemSecondary (oscuro) — home cards */
	--bl-system-primary: hsla(0, 0%, 100%, 0.92);
	--bl-system-secondary: hsla(0, 0%, 100%, 0.64);
	--bl-heading: var(--bl-system-primary);
	--bl-muted: var(--bl-system-secondary);
	--bl-muted-soft: hsla(0, 0%, 100%, 0.45);

	--z-topbar: 90;
	--z-overlay: 95;
	--z-sidebar: 100;
	--z-player: 110;
}

[data-theme="light"] {
	color-scheme: light;

	--mc-bg: #f5f5f7;
	--mc-bg-elevated: #ffffff;
	--mc-bg-row-hover: #ebebef;
	--mc-text: #1d1d1f;
	--mc-text-muted: #6e6e73;
	--mc-border: rgba(0, 0, 0, 0.08);
	--mc-accent: #d90c0c;

	--bl-red: #d90c0c;
	--bl-nav-text: rgba(0, 0, 0, 0.72);
	--bl-nav-hover-bg: rgba(0, 0, 0, 0.05);
	--bl-icon-hover: #1d1d1f;
	--bl-sidebar-bg: #ebebed;
	--bl-input-bg: rgba(0, 0, 0, 0.06);
	--bl-border: rgba(0, 0, 0, 0.08);
	--bl-overlay-bg: rgba(0, 0, 0, 0.4);

	--bl-glass-material-bg: rgba(245, 245, 247, 0.55);
	--bl-glass-material-shadow: rgba(0, 0, 0, 0.18);
	--bl-glass-elevated-fallback: #f0f0f0;
	--bl-glass-elevated-bg: rgba(246, 246, 246, 0.72);
	--bl-glass-elevated-shadow: rgba(0, 0, 0, 0.16);
	--bl-glass-inner-stroke: rgba(255, 255, 255, 0.2);

	--bl-border-strong: rgba(0, 0, 0, 0.14);
	--bl-player-glass: var(--bl-glass-material-bg);
	--bl-player-glass-shadow: var(--bl-glass-material-shadow);
	--bl-player-icon: rgba(29, 29, 31, 0.72);
	--bl-player-icon-hover: #1d1d1f;
	--bl-player-text: #1d1d1f;
	--bl-player-time: rgba(29, 29, 31, 0.72);

	--bl-mixes-primary: rgba(0, 0, 0, 0.88);
	--bl-mixes-secondary: rgba(0, 0, 0, 0.56);
	--bl-featured-photo-bg: #e6e6ea;

	--bl-system-primary: rgba(0, 0, 0, 0.88);
	--bl-system-secondary: rgba(0, 0, 0, 0.56);
	--bl-heading: var(--bl-system-primary);
	--bl-muted: var(--bl-system-secondary);
	--bl-muted-soft: rgba(0, 0, 0, 0.45);
}

body {
	margin: 0;
	font-family: var(--mc-font);
	font-size: 14px;
	line-height: 1.4;
	font-feature-settings: "ss01" on, "cv11" on;
	-webkit-font-smoothing: antialiased;
	background: var(--mc-bg);
	color: var(--mc-text);
}

/* No underlines on links (global) */
a,
a:hover,
a:focus,
a:active,
a:visited {
	text-decoration: none !important;
}

/* Flat app background — NO red/blue glow */
.mc-app {
	background: var(--mc-bg) !important;
}

.bl-logo {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.bl-sidebar-logo {
	display: inline-flex;
	text-decoration: none;
	opacity: 0.95;
}

.bl-sidebar-logo:hover {
	opacity: 1;
	text-decoration: none;
}

.mc-brand-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.mc-brand-link:hover {
	text-decoration: none;
}

/* Page titles — Apple header-emphasized (~34px) */
.mc-page-title {
	font-family: var(--mc-font-display);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0 0 0.35rem;
}

.mc-page-lede {
	font-size: 15px;
	color: var(--mc-text-muted);
	margin: 0;
}

.mc-rail__title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

@media (max-width: 782px) {
	.mc-page-title {
		font-size: 28px;
	}
}

/* Theme toggle — flat SVG icons (no circle chrome) */
.bl-theme-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--mc-text);
	cursor: pointer;
	opacity: 0.92;
}

.bl-theme-toggle:hover {
	opacity: 1;
	color: var(--bl-red, #d90c0c);
}

.bl-theme-toggle__icon {
	position: absolute;
	inset: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 140ms ease, transform 140ms ease;
}

.bl-theme-toggle__icon .bl-icon {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
}

/* Dark mode → show sun (switch to light) */
[data-theme="dark"] .bl-theme-toggle__icon--to-light {
	opacity: 1;
	transform: none;
}

[data-theme="dark"] .bl-theme-toggle__icon--to-dark {
	opacity: 0;
	transform: scale(0.7) rotate(-12deg);
	pointer-events: none;
}

/* Light mode → show moon (switch to dark) */
[data-theme="light"] .bl-theme-toggle__icon--to-dark {
	opacity: 1;
	transform: none;
}

[data-theme="light"] .bl-theme-toggle__icon--to-light {
	opacity: 0;
	transform: scale(0.7) rotate(12deg);
	pointer-events: none;
}


[data-theme="light"] .mc-table-wrap {
	background: rgba(255, 255, 255, 0.8);
}

/* —— DJ profile —— */
.bl-dj-hero {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 1.75rem;
	align-items: end;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--mc-border);
}

.bl-dj-hero__art {
	width: 220px;
	height: 220px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--mc-bg-elevated);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.bl-dj-hero__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bl-dj-hero__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 4.5rem;
	font-weight: 700;
	color: var(--mc-text-muted);
}

.bl-dj-hero__eyebrow {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mc-text-muted);
}

.bl-dj-hero__name {
	margin: 0 0 0.75rem;
}

.bl-dj-hero__bio {
	max-width: 42rem;
	color: var(--mc-text-muted);
	font-size: 0.95rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}

.bl-dj-hero__bio p {
	margin: 0 0 0.5rem;
}

.bl-dj-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bl-dj-hero__stat-label {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mc-text-muted);
	margin-bottom: 0.15rem;
}

.bl-dj-catalog__title {
	font-size: 1.15rem;
	margin: 0 0 1rem;
}

.bl-single__dj {
	margin: 0 0 0.35rem;
	font-size: 0.9rem;
}

.bl-single__dj a {
	color: var(--mc-accent);
}

.bl-single__bits {
	margin: 0.35rem 0 0;
	color: var(--mc-text-muted);
	font-size: 0.9rem;
}

.bl-single__versions {
	margin: 1.75rem 0;
}

.bl-single__section-title {
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

.bl-versions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bl-versions__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.65rem 0.85rem;
	border-radius: 8px;
	background: var(--mc-bg-elevated);
	border: 1px solid var(--mc-border);
}

.bl-versions__name {
	font-weight: 600;
	font-size: 0.92rem;
}

.bl-versions__no-demo {
	font-size: 0.8rem;
	color: var(--mc-text-muted);
}

@media (max-width: 782px) {
	.bl-dj-hero {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.bl-dj-hero__art {
		width: 160px;
		height: 160px;
	}
}