/**
 * Wavionyx design tokens — the single source of truth for color, type,
 * spacing, radius, shadow and motion across the theme.
 */
:root {
	/* Color */
	--color-primary: #0B1526;
	--color-primary-hover: #16233D;
	--color-accent: #2F6FED;
	--color-accent-hover: #1F5AD1;
	--color-conversion: #FF5A1F;
	--color-conversion-hover: #E64D14;

	/* Secondary accents — used purposefully for category/badge variety, not
	   randomly: each carries its own meaning (new/fresh, warm/energetic,
	   premium/creative) rather than competing with the primary brand blue. */
	--color-teal: #0D9488;
	--color-teal-hover: #0B7A70;
	--color-amber: #D97706;
	--color-amber-hover: #B96406;
	--color-violet: #7C3AED;
	--color-violet-hover: #6D28D9;

	--color-background: #F7F8FA;
	--color-surface: #FFFFFF;
	--color-surface-alt: #F1F2F5;
	--color-text: #10131A;
	--color-text-muted: #5B6472;
	--color-text-on-primary: #F7F8FA;
	--color-border: #E4E7EC;
	--color-border-strong: #C7CCD6;
	--color-success: #16A34A;
	--color-danger: #DC2626;
	--color-star: #F5A623;

	/* Typography */
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Type scale — steps of ~1.2 (a calm "minor third" rhythm) so headings
	   lead without shouting; body line-height follows the golden ratio (1.618). */
	--fs-xs: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);
	--fs-sm: clamp(0.8125rem, 0.8rem + 0.08vw, 0.875rem);
	--fs-base: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
	--fs-md: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--fs-lg: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
	--fs-xl: clamp(1.25rem, 1.17rem + 0.35vw, 1.5rem);
	--fs-2xl: clamp(1.5rem, 1.36rem + 0.6vw, 1.875rem);
	--fs-3xl: clamp(1.75rem, 1.55rem + 0.9vw, 2.25rem);
	--fs-4xl: clamp(2rem, 1.7rem + 1.3vw, 2.75rem);

	--lh-tight: 1.2;
	--lh-snug: 1.4;
	--lh-normal: 1.618;

	/* Spacing (4px scale) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 2.5rem;
	--space-8: 3rem;
	--space-9: 4rem;
	--space-10: 5rem;
	--space-11: 6.5rem;
	--space-12: 8rem;

	/* Layout */
	--container-max: 1360px;
	--container-pad: clamp(1.25rem, 3vw, 2.5rem);

	/* Radius */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;

	/* Shadow — restrained, used sparingly */
	--shadow-sm: 0 1px 2px rgba(11, 21, 38, 0.05), 0 1px 1px rgba(11, 21, 38, 0.04);
	--shadow-md: 0 2px 4px rgba(11, 21, 38, 0.04), 0 12px 28px rgba(11, 21, 38, 0.09);
	--shadow-lg: 0 4px 8px rgba(11, 21, 38, 0.05), 0 24px 56px rgba(11, 21, 38, 0.16);

	/* Motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 450ms;

	--header-height: 76px;
	--announcement-height: 40px;
}