/**
 * Vandadcast design tokens (phase 3).
 *
 * @package Vandadcast
 */

.vandadcast,
body.vandadcast {
	/* Brand (overridden inline from settings) */
	--vc-color-primary: #2563eb;
	--vc-color-accent: #0ea5e9;
	--vc-color-text: CanvasText;
	--vc-color-bg: Canvas;
	--vc-color-surface: color-mix(in srgb, Canvas 92%, CanvasText 4%);
	--vc-color-border: color-mix(in srgb, CanvasText 12%, transparent);
	--vc-color-muted: color-mix(in srgb, CanvasText 72%, transparent);

	/* Legacy aliases */
	--vandadcast-player-primary: var(--vc-color-primary);
	--vandadcast-player-accent: var(--vc-color-accent);
	--vandadcast-surface: var(--vc-color-surface);
	--vandadcast-border: 1px solid var(--vc-color-border);
	--vandadcast-radius: var(--vc-radius-md);

	/* Spacing */
	--vc-space-1: 0.25rem;
	--vc-space-2: 0.5rem;
	--vc-space-3: 0.75rem;
	--vc-space-4: 1rem;
	--vc-space-5: 1.25rem;
	--vc-space-6: 1.5rem;
	--vc-space-7: 2rem;
	--vc-space-8: 2.5rem;

	/* Radius */
	--vc-radius-sm: 8px;
	--vc-radius-md: 12px;
	--vc-radius-lg: 16px;
	--vc-radius-full: 999px;

	/* Typography */
	--vc-font-size-xs: 0.78rem;
	--vc-font-size-sm: 0.88rem;
	--vc-font-size-md: 1rem;
	--vc-font-size-lg: 1.15rem;
	--vc-font-size-xl: 1.35rem;
	--vc-font-size-2xl: clamp(1.5rem, 2.4vw, 2.15rem);
	--vc-line-height: 1.55;
	--vc-line-height-tight: 1.25;

	/* Elevation */
	--vc-shadow-sm: 0 4px 14px color-mix(in srgb, CanvasText 8%, transparent);
	--vc-shadow-md: 0 10px 30px color-mix(in srgb, CanvasText 12%, transparent);
	--vc-shadow-lg: 0 16px 48px color-mix(in srgb, CanvasText 14%, transparent);

	/* Player (phase 1) */
	--vc-player-h-mini: 3.5rem;
	--vc-player-h-expanded: min(45vh, 320px);
	--vc-safe-bottom: env(safe-area-inset-bottom, 0px);
	--vc-z-player: 100050;

	/* Focus */
	--vc-focus-ring: 2px solid color-mix(in srgb, var(--vc-color-accent) 75%, transparent);
	--vc-focus-offset: 2px;
}

@media (prefers-color-scheme: dark) {
	body.vandadcast:not(.vandadcast-theme-light),
	body.vandadcast:not(.vandadcast-theme-light) .vandadcast {
		--vc-color-text: #e8edf5;
		--vc-color-bg: #0f1419;
		--vc-color-surface: #1a222d;
		--vc-color-border: color-mix(in srgb, #e8edf5 14%, transparent);
		--vc-color-muted: color-mix(in srgb, #e8edf5 68%, transparent);
		color: var(--vc-color-text);
		background: var(--vc-color-bg);
	}
}

body.vandadcast-theme-dark,
body.vandadcast-theme-dark .vandadcast {
	--vc-color-text: #e8edf5;
	--vc-color-bg: #0f1419;
	--vc-color-surface: #1a222d;
	--vc-color-border: color-mix(in srgb, #e8edf5 14%, transparent);
	--vc-color-muted: color-mix(in srgb, #e8edf5 68%, transparent);
	color: var(--vc-color-text);
	background: var(--vc-color-bg);
}