/*
 * Watchiet Music: design tokens (Phase 1).
 * All values are CSS custom properties scoped to .wmds so they never leak into
 * the active theme. Brand colours are injected from Settings (validated).
 * The shell is dark: white and light-grey text on black meet WCAG AA contrast (4.5:1).
 */
.wmds {
	/* Brand (overridden by Settings through an inline style). */
	--wmds-primary: #1b4fd8;
	--wmds-on-primary: #ffffff;
	--wmds-accent: #b45309;
	--wmds-on-accent: #ffffff;

	/* Neutrals. */
	--wmds-bg: #000000;
	--wmds-surface: #111216;
	--wmds-surface-2: #181a20;
	--wmds-text: #ffffff;
	--wmds-muted: #b9bec9;
	--wmds-border: #2a2d36;
	--wmds-focus: #ffffff;

	/* Space scale. */
	--wmds-space-1: 0.25rem;
	--wmds-space-2: 0.5rem;
	--wmds-space-3: 0.75rem;
	--wmds-space-4: 1rem;
	--wmds-space-5: 1.5rem;
	--wmds-space-6: 2rem;
	--wmds-space-7: 3rem;

	/* Shape. */
	--wmds-radius: 12px;
	--wmds-radius-sm: 8px;

	/* Fluid type scale. */
	--wmds-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wmds-fs-0: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
	--wmds-fs-1: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
	--wmds-fs-2: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
	--wmds-fs-3: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);

	/* Touch target (WCAG 2.2: at least 24px; we use 44px). */
	--wmds-tap: 44px;

	/* Layout. */
	--wmds-max: 1200px;
}