/*
 * MADEX Audio 2.0A — UI Design System & Theme Isolation
 * This layer intentionally loads after legacy App View styles. It creates the
 * stable token/reset/container foundation used by the MADEX 2.0 presentation.
 */

.madex-app-v2 {
	/* Core palette */
	--madex-bg: #0c0d11;
	--madex-bg-elevated: #101116;
	--madex-surface: #15161c;
	--madex-surface-2: #191a21;
	--madex-surface-hover: #20212a;
	--madex-border: #292b35;
	--madex-border-soft: #20222b;
	--madex-text: #f7f7fa;
	--madex-text-muted: #9b9daa;
	--madex-text-subtle: #737683;
	--madex-primary: #8b5cf6;
	--madex-primary-strong: #a66cff;
	--madex-primary-soft: rgba(139, 92, 246, .14);
	--madex-danger: #fb7185;
	--madex-success: #34d399;
	--madex-warning: #fbbf24;

	/* Spacing system */
	--madex-space-1: 4px;
	--madex-space-2: 8px;
	--madex-space-3: 12px;
	--madex-space-4: 16px;
	--madex-space-5: 24px;
	--madex-space-6: 32px;
	--madex-space-7: 48px;
	--madex-space-8: 64px;

	/* Shape & sizing */
	--madex-radius-sm: 8px;
	--madex-radius-md: 12px;
	--madex-radius-lg: 18px;
	--madex-radius-xl: 24px;
	--madex-touch-target: 44px;
	--madex-content-max: 1180px;
	--madex-sidebar-width: 232px;
	--madex-page-pad: clamp(16px, 3vw, 48px);

	/* Typography */
	--madex-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--madex-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--madex-title-page: clamp(28px, 3.15vw, 44px);
	--madex-title-section: clamp(20px, 2vw, 28px);
	--madex-title-track: clamp(15px, 1.25vw, 17px);
	--madex-text-secondary: clamp(13px, 1vw, 14px);

	/* Backward-compatible aliases consumed by the existing v1 App View while
	 * UI 2 components are rolled out screen-by-screen. */
	--app-bg: var(--madex-bg);
	--app-panel: var(--madex-bg-elevated);
	--app-panel-2: var(--madex-surface);
	--app-border: var(--madex-border);
	--app-text: var(--madex-text);
	--app-muted: var(--madex-text-muted);
	--app-accent: var(--madex-primary);

	position: relative;
	color: var(--madex-text) !important;
	background: var(--madex-bg);
	font-family: var(--madex-font-sans) !important;
	font-size: 16px;
	line-height: 1.5;
	color-scheme: dark;
	isolation: isolate;
	container: madex-app / inline-size;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Scoped normalization. Never reset the WordPress theme outside MADEX. */
.madex-app-v2,
.madex-app-v2 *,
.madex-app-v2 *::before,
.madex-app-v2 *::after {
	box-sizing: border-box;
}

.madex-app-v2 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) {
	margin-top: 0;
	color: inherit !important;
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal;
}

.madex-app-v2 :where(h1, h2, h3, h4, h5, h6) {
	font-weight: 700;
	line-height: 1.12;
}

.madex-app-v2 :where(button, input, select, textarea, optgroup) {
	font: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.madex-app-v2 :where(button, [role="button"]) {
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.madex-app-v2 :where(button) {
	line-height: 1.2 !important;
	font-weight: inherit;
}

.madex-app-v2 :where(button, input, select, textarea) {
	margin: 0;
	max-width: 100%;
}

.madex-app-v2 :where(input, select, textarea) {
	color: var(--madex-text) !important;
	background-color: var(--madex-surface) !important;
	border-color: var(--madex-border) !important;
}

.madex-app-v2 :where(input, textarea)::placeholder {
	color: var(--madex-text-muted) !important;
	opacity: 1;
}

.madex-app-v2 :where(a) {
	color: inherit;
	text-decoration-thickness: .08em;
	text-underline-offset: .16em;
}

.madex-app-v2 :where(img, svg, video, canvas) {
	max-width: 100%;
}

.madex-app-v2 :where(svg) {
	fill: currentColor;
}

.madex-app-v2 :where(button, a, input, select, textarea):focus-visible {
	outline: 2px solid var(--madex-primary-strong) !important;
	outline-offset: 3px;
}

.madex-app-v2 :where([hidden]) {
	display: none !important;
}

/* Prevent common WordPress/theme utility rules from recoloring MADEX titles. */
.madex-app-v2 .madex-audio-app__topbar h2,
.madex-app-v2 .madex-audio-app__view-heading h3,
.madex-app-v2 .madex-audio-app__section-head h3,
.madex-app-v2 .madex-audio-app__row-meta strong,
.madex-app-v2 .madex-audio-app__playlist-card h3,
.madex-app-v2 .madex-audio-app__live-card h3,
.madex-app-v2 .madex-audio-app__release-dialog h3,
.madex-app-v2 .madex-audio-app__store-hero h3,
.madex-app-v2 .madex-audio-app__mobile-sheet h3 {
	color: var(--madex-text) !important;
}

.madex-app-v2 .madex-audio-app__topbar h2 {
	font-size: var(--madex-title-page) !important;
	line-height: 1.08 !important;
}

.madex-app-v2 .madex-audio-app__view-heading h3,
.madex-app-v2 .madex-audio-app__store-hero h3 {
	font-size: var(--madex-title-section) !important;
}

.madex-app-v2 .madex-audio-app__row-meta strong {
	font-size: var(--madex-title-track) !important;
}

.madex-app-v2 .madex-audio-app__mobile-sheet h3 {
	font-size: clamp(20px, 5.5vw, 24px) !important;
}

.madex-app-v2 .madex-audio-app__eyebrow,
.madex-app-v2 .madex-audio-app__view-heading > p,
.madex-app-v2 .madex-audio-app__row-meta span,
.madex-app-v2 .madex-audio-app__row-meta p,
.madex-app-v2 .madex-audio-app__sidebar-meta {
	color: var(--madex-text-muted) !important;
}

/* Component containment hooks for UI 2.0. The existing markup can immediately
 * benefit, while future components can use named @container queries. */
.madex-app-v2 .madex-audio-app__workspace {
	container: madex-workspace / inline-size;
}

.madex-app-v2 .madex-audio-app__content {
	container: madex-content / inline-size;
}

.madex-app-v2 .madex-audio-app__track-list,
.madex-app-v2 .madex-audio-app__media-grid,
.madex-app-v2 .madex-audio-app__artist-grid,
.madex-app-v2 .madex-audio-app__release-grid {
	container-type: inline-size;
}

/* Controlled content width on desktop. App chrome may span the window, but
 * reading/list content should not become an ultrawide strip. */
@media (min-width: 1024px) {
	.madex-app-v2 .madex-audio-app__content > .madex-audio-app__view {
		max-width: var(--madex-content-max);
		margin-inline: auto;
	}

	.madex-app-v2 .madex-audio-app__topbar,
	.madex-app-v2 .madex-audio-app__tabs {
		padding-inline: var(--madex-page-pad);
	}
}

/* Base compact behavior by container rather than device. More complete 2.0
 * component variants are introduced in the next implementation stages. */
@container madex-workspace (max-width: 719px) {
	.madex-app-v2 .madex-audio-app__topbar,
	.madex-app-v2 .madex-audio-app__content,
	.madex-app-v2 .madex-audio-app__tabs {
		padding-inline: var(--madex-space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.madex-app-v2 *,
	.madex-app-v2 *::before,
	.madex-app-v2 *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* High-risk theme collision guards for App View controls. These are scoped to
 * MADEX chrome and intentionally do not target the shared player controls. */
.madex-app-v2 .madex-audio-app__workspace :where(button),
.madex-app-v2 .madex-audio-app__sidebar :where(button),
.madex-app-v2 .madex-audio-app__mobile-sheet :where(button) {
	color: var(--madex-text-muted) !important;
	box-shadow: none !important;
}

.madex-app-v2 .madex-audio-app__nav-item,
.madex-app-v2 .madex-audio-app__tabs button,
.madex-app-v2 .madex-audio-app__tabs-more {
	color: var(--madex-text-muted) !important;
}

.madex-app-v2 .madex-audio-app__nav-item:hover,
.madex-app-v2 .madex-audio-app__nav-item.is-active,
.madex-app-v2 .madex-audio-app__tabs button.is-active,
.madex-app-v2 .madex-audio-app__tabs-more.is-active,
.madex-app-v2 .madex-audio-app__mobile-sheet-grid button,
.madex-app-v2 .madex-audio-app__mobile-sheet-close {
	color: var(--madex-text) !important;
}

.madex-app-v2 .madex-audio-app__section-head button,
.madex-app-v2 .madex-audio-app__filter-reset {
	color: var(--madex-primary-strong) !important;
}

.madex-app-v2 .madex-audio-app__hero-play,
.madex-app-v2 .madex-audio-app__live-card button,
.madex-app-v2 .madex-audio-app__playlist-card > button {
	color: #fff !important;
}