/**
 * DSA design tokens — single source for CSS custom properties.
 * Edit here; components use var(--token-name) only.
 */
:root {
	--primary: hsla(359, 98%, 46%, 1);
	--primary-hover: hsl(359deg 98% 53%);
	--shadow-interactive-hover: 0 4px 22px 6px var(--primary-30);
	--primary-5: hsla(359, 98%, 46%, 0.05);
	--primary-10: hsla(359, 98%, 46%, 0.1);
	--primary-20: hsla(359, 98%, 46%, 0.2);
	--primary-30: hsla(359, 98%, 46%, 0.3);
	--primary-40: hsla(359, 98%, 46%, 0.4);
	--primary-50: hsla(359, 98%, 46%, 0.5);
	--primary-60: hsla(359, 98%, 46%, 0.6);
	--primary-70: hsla(359, 98%, 46%, 0.7);
	--primary-80: hsla(359, 98%, 46%, 0.8);
	--primary-90: hsla(359, 98%, 46%, 0.9);
	--primary-d-1: hsla(359, 98%, 53%, 1);
	--primary-d-2: hsla(7, 84%, 29%, 1);
	--primary-d-3: hsla(10, 78%, 20%, 1);
	--primary-d-4: hsla(18, 79%, 11%, 1);
	--primary-l-1: hsla(10, 91%, 59%, 1);
	--primary-l-2: hsla(12, 100%, 70%, 1);
	--primary-l-3: hsla(14, 100%, 80%, 1);
	--primary-l-4: hsla(15, 100%, 90%, 1);
	--icons-color: hsla(359, 100%, 50%, 1);
	--blur-color: hsla(360, 100%, 53%, 0.25);
	--bg-body: hsla(0, 0%, 6%, 1);
	--bg-surface: hsla(0, 0%, 0%, 1);
	--text-body: hsla(0, 0%, 100%, 1);
	--text-title: hsla(0, 0%, 95%, 1);
	--border-primary: hsla(0, 0%, 50%, 0.25);
	--shadow-primary: hsla(0, 0%, 0%, 0.15);
	--success: hsl(136, 95%, 56%);
	--success-5: hsla(136, 95%, 56%, 0.05);
	--success-10: hsla(136, 95%, 56%, 0.1);
	--success-20: hsla(136, 95%, 56%, 0.2);
	--success-30: hsla(136, 95%, 56%, 0.3);
	--success-40: hsla(136, 95%, 56%, 0.4);
	--success-50: hsla(136, 95%, 56%, 0.5);
	--success-60: hsla(136, 95%, 56%, 0.6);
	--success-70: hsla(136, 95%, 56%, 0.7);
	--success-80: hsla(136, 95%, 56%, 0.8);
	--success-90: hsla(136, 95%, 56%, 0.9);
	--error: hsl(351, 95%, 56%);
	--error-5: hsla(351, 95%, 56%, 0.05);
	--error-10: hsla(351, 95%, 56%, 0.1);
	--error-20: hsla(351, 95%, 56%, 0.2);
	--error-30: hsla(351, 95%, 56%, 0.3);
	--error-40: hsla(351, 95%, 56%, 0.4);
	--error-50: hsla(351, 95%, 56%, 0.5);
	--error-60: hsla(351, 95%, 56%, 0.6);
	--error-70: hsla(351, 95%, 56%, 0.7);
	--error-80: hsla(351, 95%, 56%, 0.8);
	--error-90: hsla(351, 95%, 56%, 0.9);
	--space-4xs: clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem);
	--space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
	--space-2xs: clamp(0.8rem, calc(0.19vw + 0.74rem), 1rem);
	--space-xs: clamp(1rem, calc(0.46vw + 0.85rem), 1.5rem);
	--space-s: clamp(1.2rem, calc(0.74vw + 0.96rem), 2rem);
	--space-m: clamp(1.6rem, calc(0.83vw + 1.33rem), 2.5rem);
	--space-inner: clamp(2rem, calc(1.85vw + 1.41rem), 4rem);
	--space-xl: clamp(3rem, calc(2.78vw + 2.11rem), 6rem);
	--space-section: clamp(6rem, calc(1.85vw + 5.41rem), 8rem);
	--space-3xl: clamp(3.91rem, calc(6.75vw + 1.75rem), 11.19rem);
	--space-4xl: clamp(4.88rem, calc(10.13vw + 1.64rem), 15.83rem);
	--text-s: clamp(1.4rem, calc(0.02vw + 1.39rem), 1.42rem);
	--text-m: clamp(1.6rem, calc(0.02vw + 1.59rem), 1.62rem);
	--text-l: clamp(1.8rem, calc(0.09vw + 1.77rem), 1.9rem);
	--text-xl: clamp(1.9rem, calc(0.09vw + 1.87rem), 2rem);
	--text-2xl: clamp(2.6rem, calc(0.56vw + 2.42rem), 3.2rem);
	--text-3xl: clamp(2.7rem, calc(1.94vw + 2.08rem), 4.8rem);
	--columns-1: repeat(1, minmax(0, 1fr));
	--columns-2: repeat(2, minmax(0, 1fr));
	--columns-3: repeat(3, minmax(0, 1fr));
	--columns-4: repeat(4, minmax(0, 1fr));
	--columns-5: repeat(5, minmax(0, 1fr));
	--columns-6: repeat(6, minmax(0, 1fr));
	--columns-7: repeat(7, minmax(0, 1fr));
	--columns-8: repeat(8, minmax(0, 1fr));
	--radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
	--radius-s: clamp(0.6rem, calc(0.19vw + 0.54rem), 0.8rem);
	--radius-m: clamp(1rem, calc(0.19vw + 0.94rem), 1.2rem);
	--radius-l: clamp(1.6rem, calc(0.37vw + 1.48rem), 2rem);
	--radius-xl: clamp(2.6rem, calc(0.56vw + 2.42rem), 3.2rem);
	--radius-full: 999rem;
	--shadow-xs: 0 1px 2px var(--shadow-primary);
	--shadow-s: 0 1.5px 3px var(--shadow-primary);
	--shadow-m: 0 2px 6px var(--shadow-primary);
	--shadow-l: 0 3px 12px var(--shadow-primary);
	--shadow-xl: 0 6px 48px var(--shadow-primary);

	/*
	 * Layout (root 62.5% → 1rem = 10px)
	 * --layout-max 160rem = 1600px (header / footer / sections)
	 * --layout-prose 72rem = 720px (article text)
	 *
	 * Breakpoints (use in @media): sm 480 | md 768 | lg 1024 | xl 1280
	 */
	--layout-gutter: clamp(2rem, 4vw, 4rem);
	--layout-max: min(100% - var(--layout-gutter) * 2, 160rem);
	--layout-prose: min(100% - var(--layout-gutter) * 2, 72rem);

	/* Aliases */
	--content-width: var(--layout-prose);
	--content-wide: var(--layout-max);
}