/* Reverb — design tokens. Nocturnal stage-black with an electric audio-spectrum accent. */
:root {
	/* ---- surfaces ---- */
	--rvb-bg:      #0b0b0f;   /* stage black                */
	--rvb-bg-2:    #121219;   /* raised panel               */
	--rvb-bg-3:    #191922;   /* card                       */
	--rvb-bg-4:    #23232e;   /* hover card                 */
	--rvb-line:    rgba( 244, 241, 234, 0.10 );
	--rvb-line-2:  rgba( 244, 241, 234, 0.18 );

	/* ---- ink ---- */
	--rvb-ink:     #f4f1ea;   /* off-white                  */
	--rvb-muted:   #a3a0af;   /* secondary text             */
	--rvb-faint:   #6d6a79;   /* tertiary / metadata        */

	/* ---- the audio spectrum (signature) ---- */
	--rvb-mag:     #ff2e7e;   /* hot magenta                */
	--rvb-vio:     #7b5cff;   /* violet                     */
	--rvb-cyan:    #2ff0d0;   /* cyan                       */
	--rvb-accent:  var( --rvb-mag );
	--rvb-accent-2: var( --rvb-cyan );
	--rvb-spectrum: linear-gradient( 90deg, #ff2e7e 0%, #b74bff 42%, #7b5cff 62%, #2ff0d0 100% );
	--rvb-spectrum-soft: linear-gradient( 120deg, rgba( 255, 46, 126, 0.22 ), rgba( 123, 92, 255, 0.16 ), rgba( 47, 240, 208, 0.20 ) );
	--rvb-glow:    0 0 40px rgba( 255, 46, 126, 0.35 );

	/* ---- type ---- */
	--rvb-f-display: 'Syne', 'Arial Black', system-ui, sans-serif;
	--rvb-f-body:    'Inter', system-ui, -apple-system, sans-serif;
	--rvb-f-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

	--fs-50:  0.78rem;
	--fs-100: 0.875rem;
	--fs-200: 1rem;
	--fs-300: 1.2rem;
	--fs-400: 1.55rem;
	--fs-500: 2.05rem;
	--fs-600: clamp( 1.7rem, 5.6vw, 2.9rem );
	--fs-700: clamp( 2.4rem, 5.4vw, 4.6rem );
	--fs-800: clamp( 2.8rem, 10.5vw, 9rem );

	/* ---- spacing (8px base) ---- */
	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2rem;
	--sp-5: 3rem;
	--sp-6: 4.5rem;
	--sp-7: 7rem;
	--sp-8: 10rem;

	--rvb-wrap: 1280px;
	--rvb-wrap-wide: 1500px;

	/* ---- radii ---- */
	--r-sm:  8px;
	--r:     14px;
	--r-lg:  22px;
	--r-pill: 999px;

	/* ---- motion ---- */
	--ease:    cubic-bezier( 0.22, 1, 0.36, 1 );
	--ease-io: cubic-bezier( 0.7, 0, 0.3, 1 );
	--dur:     0.5s;

	/* ---- effects ---- */
	--rvb-shadow: 0 24px 60px -24px rgba( 0, 0, 0, 0.8 );
	--rvb-blur:   saturate( 160% ) blur( 16px );

	/* ---- player bar height (reserved so content never hides behind it) ---- */
	--rvb-player-h: 72px;
}

@media ( max-width: 640px ) {
	:root { --rvb-player-h: 62px; }
}