@layer base, layout, components, motion;

:root {
	/* color */
	--color-primary: #d81b7a;
	--color-primary-dark: #a3125a;
	--color-primary-soft: #fbe4f0;
	--color-accent: #6a3ea1;
	--color-bg: #fffaf9;
	--color-surface: #ffffff;
	--color-text: #2b1c25;
	--color-text-muted: #6b5563;
	--color-border: #f0d6e4;

	/* type — fluid between mobile and desktop, no breakpoints needed */
	--font-base: "Tajawal", "Segoe UI", system-ui, sans-serif;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
	--fs-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.25rem);
	--lh-base: 1.6;

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

	/* shape */
	--radius-sm: 8px;
	--radius-lg: 22px;
	--radius-pill: 999px;

	/* elevation */
	--shadow-sm: 0 1px 3px rgba(43, 28, 37, 0.08);

	/* layout */
	--container-width: 1100px;
}