/* ==========================================================================
   MusicHaven global tokens — BRIGHT foundation, gold anchor, app-native radii.
   Dual-token AA law: --mh-gold = fills/borders/large display ONLY;
   --mh-gold-ink / --mh-violet-ink = text on light (both >=5.3:1 on bg & panels).
   Genre atmosphere lives in skins.css (component-scoped, never body).
   ========================================================================== */
:root {
	--mh-bg: #FBF4E6;
	--mh-surface: #FFFDF7;
	--mh-surface-2: #F4EAD6;
	--mh-ink: #1A0E24;
	--mh-ink-soft: #3A2E4A;
	--mh-muted: #5F5370;
	--mh-line: rgba(26, 14, 36, 0.14);
	--mh-line-soft: rgba(26, 14, 36, 0.08);

	--mh-gold: #C8A44D;
	--mh-gold-bright: #E4C878;
	--mh-gold-ink: #7A6125;
	--mh-violet: #6B3FA0;
	--mh-violet-ink: #5A3488;
	/* Dark bands are DEEP PLUM / AUBERGINE — alive and warm, never black. */
	--mh-plum: #3A1F4D;
	--mh-plum-2: #2E1A40;
	--mh-grape: #4A2A5C;
	--mh-night: #241733;         /* deep aubergine (was near-black) — used by footer/join/signal */
	--mh-night-2: #33234A;
	--mh-night-text: #F3ECE0;    /* warm cream text on plum */
	--mh-night-muted: #C6B7D6;
	--mh-pulsebar: linear-gradient(100deg, #3A1F4D 0%, #2E1A40 52%, #46264F 100%);

	--mh-radius: 18px;
	--mh-radius-lg: 28px;
	--mh-radius-pill: 999px;
	--mh-wrap: 1240px;
	--mh-gap: clamp(14px, 2.6vw, 26px);

	--mh-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--mh-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--mh-shadow: 0 16px 44px rgba(26, 14, 36, 0.12);
	--mh-shadow-soft: 0 8px 22px rgba(26, 14, 36, 0.10);
	--mh-glow: 0 0 0 transparent;

	--mh-grad-gold: linear-gradient(135deg, #E4C878, #C8A44D);
	--mh-grad-violet: linear-gradient(135deg, #6B3FA0, #8C5AC4);
	--mh-header-h: 58px;
}

/* Default (unskinned) component atmosphere = bright surfaces. Skins override these. */
:root, .mh-skin-default {
	--sk-bg: var(--mh-surface);
	--sk-panel: var(--mh-surface-2);
	--sk-accent: var(--mh-gold);
	--sk-accent-2: var(--mh-violet);
	--sk-text: var(--mh-ink);
	--sk-muted: var(--mh-muted);
	--sk-chip-bg: var(--mh-gold);
	--sk-chip-text: #100A14;
	--sk-glow: rgba(200, 164, 77, 0.28);
	--sk-grad: var(--mh-grad-gold);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--mh-bg);
	color: var(--mh-ink);
	font-family: var(--mh-sans);
	font-size: 17px;
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

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

a { color: var(--mh-violet-ink); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
	font-family: var(--mh-serif);
	font-weight: 800;
	line-height: 1.06;
	color: var(--mh-ink);
	margin: 0 0 0.5em;
	letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

:focus-visible {
	outline: 3px solid var(--mh-violet-ink);
	outline-offset: 2px;
	border-radius: 6px;
}
.mh-on-dark :focus-visible, .mh-skinned :focus-visible {
	outline-color: var(--mh-gold-bright);
}

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

.skip-link {
	position: absolute;
	left: -9999px; top: 0;
	z-index: 300;
	background: var(--mh-violet-ink);
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 12px 0;
	font-weight: 800;
}
.skip-link:focus { left: 0; text-decoration: none; }

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