/* RPSD+ Design Tokens */
:root {
	/* Colours */
	--color-bg: #0B1120;
	--color-panel: rgba(11, 23, 36, 0.82);
	--color-text: #F1F5F9;
	--color-muted: #94A3B8;
	--color-primary: #7C3AED;
	--color-secondary: #F472B6;
	--color-ok: #22c55e;
	--color-warn: #f59e0b;
	--color-bad: #ef4444;

	/* Spacing (px) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;

	/* Radii */
	--radius-1: 6px;
	--radius-2: 8px;
	--radius-3: 10px;
	--radius-4: 12px;

	/* Shadows */
	--shadow-1: 0 1px 2px rgba(0,0,0,0.35);
	--shadow-2: 0 4px 10px rgba(0,0,0,0.35);

	/* Layers */
	--z-menu: 1000;
	--z-overlay: 9998;
	--z-modal: 9999;

	/* Motion */
	--dur-fast: 120ms;
	--dur-med: 200ms;
	--dur-slow: 300ms;
	--ease-standard: cubic-bezier(.22,.61,.36,1);
	--ease-emphasis: cubic-bezier(.2, .9, .22, 1);

	/* FX */
	--fx-density: 1; /* 0.0–1.0 multiplier for future effects volume */
}

/* Motion-safe utility (
   HTML will receive data-reduced-motion="true" when prefers-reduced-motion is set
) */
:root[data-reduced-motion="true"] * {
	animation: none !important;
	transition: none !important;
}