/*!
 * SCL-MUSIK-CARD-REDESIGN-FOUNDATION-001 — Design Tokens
 *
 * CSS Custom Properties fuer die neue kanonische Music-Card-Architektur.
 * Quelle: SCL-MUSIK-CARD-UX-REDESIGN-SPEC-001 (Sektion 6).
 *
 * In FOUNDATION-001 wird diese Datei NICHT public auf /musik/ geladen.
 * Sie wird ausschliesslich auf der Admin-Token-Preview-Page eingebunden.
 *
 * KEINE Renderer-Aenderung. KEINE Public-Surface-Umschaltung.
 */

:root {

	/* ─── Spacing ──────────────────────────────────────────────── */
	--mc-space-1:   0.25rem;  /* 4px */
	--mc-space-2:   0.5rem;
	--mc-space-3:   0.75rem;
	--mc-space-4:   1rem;
	--mc-space-5:   1.25rem;
	--mc-space-6:   1.5rem;
	--mc-space-7:   1.75rem;
	--mc-space-8:   2rem;
	--mc-space-10:  2.5rem;
	--mc-space-12:  3rem;
	--mc-space-16:  4rem;
	--mc-space-20:  5rem;

	/* ─── Radius ──────────────────────────────────────────────── */
	--mc-radius-card:          24px;
	--mc-radius-cover:         16px;
	--mc-radius-button:        12px;
	--mc-radius-pill:          999px;
	--mc-radius-tab-indicator: 2px;
	--mc-radius-accordion:     12px;

	/* ─── Shadow ──────────────────────────────────────────────── */
	--mc-shadow-card-base:      0 4px 20px rgba(0, 0, 0, 0.35);
	--mc-shadow-card-elevated:  0 12px 40px rgba(0, 0, 0, 0.55);
	--mc-shadow-cover:          0 8px 24px rgba(0, 0, 0, 0.45);
	--mc-shadow-cover-elevated: 0 20px 60px rgba(0, 0, 0, 0.65);
	--mc-shadow-button-glow:    0 0 16px var(--mc-color-button-glow);

	/* ─── Blur ────────────────────────────────────────────────── */
	--mc-blur-glass-strong: 24px;
	--mc-blur-glass-medium: 16px;
	--mc-blur-glass-soft:   8px;
	--mc-blur-cover-bg:     28px;

	/* ─── Glow ────────────────────────────────────────────────── */
	--mc-glow-cover-soft:      0 0 32px rgba(255, 180, 80, 0.25);
	--mc-glow-cover-strong:    0 0 64px rgba(255, 180, 80, 0.45);
	--mc-glow-button-spotify:  0 0 16px rgba(30, 215, 96, 0.45);
	--mc-glow-button-apple:    0 0 16px rgba(252, 82, 82, 0.45);
	--mc-glow-button-yt-music: 0 0 16px rgba(255, 0, 0, 0.45);
	--mc-glow-button-amazon:   0 0 16px rgba(0, 168, 225, 0.45);
	--mc-glow-heart:           0 0 24px rgba(255, 80, 150, 0.55);

	/* ─── Color (Dark-Default) ────────────────────────────────── */
	--mc-color-bg-primary:       #0a0a14;
	--mc-color-bg-card:          #14141f;
	--mc-color-bg-tab-inactive:  rgba(255, 255, 255, 0.04);
	--mc-color-bg-tab-active:    rgba(255, 255, 255, 0.08);
	--mc-color-fg-primary:       rgba(255, 255, 255, 0.96);
	--mc-color-fg-secondary:     rgba(255, 255, 255, 0.72);
	--mc-color-fg-muted:         rgba(255, 255, 255, 0.50);
	--mc-color-fg-disabled:      rgba(255, 255, 255, 0.30);
	--mc-color-accent-primary:   #ff7eb3;
	--mc-color-accent-secondary: #8c5cff;
	--mc-color-artist-accent:    var(--mc-color-accent-primary);
	--mc-color-tab-active:       var(--mc-color-accent-primary);
	--mc-color-button-glow:      var(--mc-color-accent-secondary);
	--mc-color-heart-active:     #ff5096;
	--mc-color-badge-released:   #44d49a;
	--mc-color-badge-presave:    #ffb84d;
	--mc-color-badge-coming:     #8c5cff;
	--mc-color-badge-archived:   #6b7280;
	--mc-color-status-active:    #44d49a;
	--mc-color-status-draft:     #ffb84d;
	--mc-color-status-imported:  #6b7280;

	/* ─── Gradient ────────────────────────────────────────────── */
	--mc-gradient-hero-default:
		radial-gradient(at 30% 20%, rgba(255, 180, 80, 0.20), transparent 60%),
		radial-gradient(at 80% 40%, rgba(140, 92, 255, 0.20), transparent 65%),
		linear-gradient(180deg, #0a0a14 0%, #000 100%);
	--mc-gradient-hero-pink:
		radial-gradient(at 30% 20%, rgba(255, 126, 179, 0.22), transparent 60%),
		radial-gradient(at 80% 40%, rgba(140, 92, 255, 0.22), transparent 65%),
		linear-gradient(180deg, #100a14 0%, #000 100%);
	--mc-gradient-badge-new:
		linear-gradient(90deg, #ff7eb3, #8c5cff);
	--mc-gradient-button-accent:
		linear-gradient(90deg, var(--mc-color-accent-primary), var(--mc-color-accent-secondary));
	--mc-gradient-divider:
		linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);

	/* ─── Motion Duration (motion-duration group) ─────────────── */
	--mc-motion-instant:   80ms;
	--mc-motion-fast:      160ms;
	--mc-motion-default:   240ms;
	--mc-motion-slow:      360ms;
	--mc-motion-very-slow: 600ms;
	--mc-motion-loop-slow: 8s;
	--mc-motion-loop-mid:  4s;
	--mc-motion-loop-fast: 1.2s;

	/* SCL-MUSIK-CARD-REDESIGN-FOUNDATION-001-FIX1: motion-duration group mit
	 * explizitem Gruppen-Praefix fuer Smoke-Coverage + Konsumtion durch
	 * Motion-Layer-Patch (Phase 6). Aliasiert die kanonischen Tokens. */
	--mc-motion-duration-instant:    var(--mc-motion-instant);
	--mc-motion-duration-fast:       var(--mc-motion-fast);
	--mc-motion-duration-default:    var(--mc-motion-default);
	--mc-motion-duration-medium:     320ms;
	--mc-motion-duration-slow:       var(--mc-motion-slow);
	--mc-motion-duration-very-slow:  var(--mc-motion-very-slow);
	--mc-motion-duration-hero:       900ms;
	--mc-motion-duration-background: 12000ms;
	--mc-motion-duration-loop-slow:  var(--mc-motion-loop-slow);
	--mc-motion-duration-loop-mid:   var(--mc-motion-loop-mid);
	--mc-motion-duration-loop-fast:  var(--mc-motion-loop-fast);
	--mc-motion-duration-reduced:    1ms;

	/* ─── Motion Easing (motion-easing group) ─────────────────── */
	--mc-easing-standard:  cubic-bezier(0.2, 0, 0.2, 1);
	--mc-easing-emphasis:  cubic-bezier(0.16, 1, 0.3, 1);
	--mc-easing-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
	--mc-easing-linear:    linear;

	/* SCL-MUSIK-CARD-REDESIGN-FOUNDATION-001-FIX1: motion-easing group mit
	 * explizitem Gruppen-Praefix fuer Smoke-Coverage + Konsumtion durch
	 * Motion-Layer-Patch (Phase 6). Aliasiert die kanonischen Tokens. */
	--mc-motion-easing-standard:  var(--mc-easing-standard);
	--mc-motion-easing-emphasis:  var(--mc-easing-emphasis);
	--mc-motion-easing-overshoot: var(--mc-easing-overshoot);
	--mc-motion-easing-linear:    var(--mc-easing-linear);

	/* ─── Z-Index ─────────────────────────────────────────────── */
	--mc-z-hero-bg:        0;
	--mc-z-card:           10;
	--mc-z-cover:          20;
	--mc-z-badge:          25;
	--mc-z-tab-navigation: 30;
	--mc-z-tab-panel:      35;
	--mc-z-stats-strip:    40;
	--mc-z-heart:          50;
	--mc-z-admin-overlay:  80;
	--mc-z-modal:          100;
	--mc-z-tooltip:        110;

	/* ─── Typography ──────────────────────────────────────────── */
	--mc-font-family-display: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
	--mc-font-family-body:    'Inter', 'SF Pro Text', system-ui, -apple-system, sans-serif;
	--mc-font-title:          700 1.75rem/1.15 var(--mc-font-family-display);
	--mc-font-artist:         600 0.95rem/1.2  var(--mc-font-family-display);
	--mc-font-description:    400 1rem/1.4     var(--mc-font-family-body);
	--mc-font-tab-label:      500 0.95rem/1.0  var(--mc-font-family-body);
	--mc-font-button-label:   600 0.95rem/1.0  var(--mc-font-family-body);
	--mc-font-stat-value:     700 1.1rem/1.0   var(--mc-font-family-display);
	--mc-font-stat-label:     500 0.8rem/1.0   var(--mc-font-family-body);
	--mc-font-lyrics:         400 1rem/1.5     var(--mc-font-family-body);
	--mc-font-download-name:  500 0.95rem/1.2  var(--mc-font-family-body);
	--mc-font-download-meta:  400 0.85rem/1.2  var(--mc-font-family-body);

	/* ─── Icon-Size ───────────────────────────────────────────── */
	--mc-icon-sm: 16px;
	--mc-icon-md: 20px;
	--mc-icon-lg: 24px;
	--mc-icon-xl: 32px;
	--mc-icon-platform-button: 28px;
	--mc-icon-platform-thumb:  36px;
	--mc-icon-heart:           20px;
	--mc-icon-stat:            20px;

	/* ─── Card-Variant (max-width pro Variante) ──────────────── */
	--mc-variant-default-release-max-width:    480px;
	--mc-variant-featured-release-max-width:   480px;
	--mc-variant-dashboard-carousel-max-width: 360px;
	--mc-variant-landingpage-hero-max-width:   960px;
	--mc-variant-landingpage-block-max-width:  720px;
	--mc-variant-portal-compact-max-width:     320px;
	--mc-variant-mini-nav-max-width:           240px;
	--mc-variant-single-detail-max-width:      540px;
	--mc-variant-admin-preview-max-width:      720px;
}

/* ─── Reduced-Motion Policy ─────────────────────────────────── */
/* SCL-MUSIK-CARD-REDESIGN-FOUNDATION-001-FIX1: motion-duration aliases werden
 * via var()-Aufloesung automatisch mit reduziert. Explizit gesetzt fuer
 * defensive Konsumtion (motion-duration-medium/hero/background sind keine
 * Aliasse der kanonischen Tokens). */
@media (prefers-reduced-motion: reduce) {
	:root {
		--mc-motion-instant:   0ms;
		--mc-motion-fast:      0ms;
		--mc-motion-default:   0ms;
		--mc-motion-slow:      0ms;
		--mc-motion-very-slow: 0ms;
		--mc-motion-loop-slow: 0ms;
		--mc-motion-loop-mid:  0ms;
		--mc-motion-loop-fast: 0ms;
		--mc-motion-duration-medium:     0ms;
		--mc-motion-duration-hero:       0ms;
		--mc-motion-duration-background: 0ms;
		--mc-motion-duration-reduced:    0ms;
	}
}