@theme {
	/* PRIMARY */
	--color-primary-50: #f5f3ff;
	--color-primary-100: #ede9fe;
	--color-primary-200: #ddd6ff;
	--color-primary-300: #c4b4ff;
	--color-primary-400: #a684ff;
	--color-primary-500: #8e51ff;
	--color-primary-600: #7f22fe;
	--color-primary-700: #7008e7;
	--color-primary-800: #5d0ec0;
	--color-primary-900: #4d179a;
	--color-primary-950: #2f0d68;

	/* NEUTRAL */
	--color-neutral-50: #f8fafc;
	--color-neutral-100: #f1f5f9;
	--color-neutral-200: #e2e8f0;
	--color-neutral-300: #cbd5e1;
	--color-neutral-400: #94a3b8;
	--color-neutral-500: #64748b;
	--color-neutral-600: #475569;
	--color-neutral-700: #334155;
	--color-neutral-800: #1e293b;
	--color-neutral-900: #0f172a;
	--color-neutral-950: #020617;

	--color-background: var(--color-neutral-50);
	--color-foreground: var(--color-neutral-900);
	--color-primary: var(--color-primary-600);
	--color-neutral: var(--color-neutral-700);
}

:root {
	color-scheme: light;
	--color-primary-50: #f5f3ff;
	--color-primary-100: #ede9fe;
	--color-primary-200: #ddd6ff;
	--color-primary-300: #c4b4ff;
	--color-primary-400: #a684ff;
	--color-primary-500: #8e51ff;
	--color-primary-600: #7f22fe;
	--color-primary-700: #7008e7;
	--color-primary-800: #5d0ec0;
	--color-primary-900: #4d179a;
	--color-primary-950: #2f0d68;

	--color-neutral-50: #f8fafc;
	--color-neutral-100: #f1f5f9;
	--color-neutral-200: #e2e8f0;
	--color-neutral-300: #cbd5e1;
	--color-neutral-400: #94a3b8;
	--color-neutral-500: #64748b;
	--color-neutral-600: #475569;
	--color-neutral-700: #334155;
	--color-neutral-800: #1e293b;
	--color-neutral-900: #0f172a;
	--color-neutral-950: #020617;

	--color-background: var(--color-neutral-50);
	--color-foreground: var(--color-neutral-900);
	--color-primary: var(--color-primary-600);
	--color-neutral: var(--color-neutral-700);
}

body {
	background-color: var(--color-background);
	color: var(--color-foreground);
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.backdrop-card {
	background: color-mix(in srgb, var(--color-primary-50) 30%, white);
	box-shadow: 0 25px 50px -12px rgb(111 22 254 / 0.18);
}

.text-primary-50 {
	color: var(--color-primary-50);
}
.text-primary-100 {
	color: var(--color-primary-100);
}
.text-primary-200 {
	color: var(--color-primary-200);
}
.text-primary-300 {
	color: var(--color-primary-300);
}
.text-primary-400 {
	color: var(--color-primary-400);
}
.text-primary-500 {
	color: var(--color-primary-500);
}
.text-primary-600 {
	color: var(--color-primary-600);
}
.text-primary-700 {
	color: var(--color-primary-700);
}
.text-primary-800 {
	color: var(--color-primary-800);
}
.text-primary-900 {
	color: var(--color-primary-900);
}
.text-primary-950 {
	color: var(--color-primary-950);
}

.bg-primary-50 {
	background-color: var(--color-primary-50);
}
.bg-primary-100 {
	background-color: var(--color-primary-100);
}
.bg-primary-200 {
	background-color: var(--color-primary-200);
}
.bg-primary-300 {
	background-color: var(--color-primary-300);
}
.bg-primary-400 {
	background-color: var(--color-primary-400);
}
.bg-primary-500 {
	background-color: var(--color-primary-500);
}
.bg-primary-600 {
	background-color: var(--color-primary-600);
}
.bg-primary-700 {
	background-color: var(--color-primary-700);
}
.bg-primary-800 {
	background-color: var(--color-primary-800);
}
.bg-primary-900 {
	background-color: var(--color-primary-900);
}
.bg-primary-950 {
	background-color: var(--color-primary-950);
}

.text-neutral-50 {
	color: var(--color-neutral-50);
}
.text-neutral-100 {
	color: var(--color-neutral-100);
}
.text-neutral-200 {
	color: var(--color-neutral-200);
}
.text-neutral-300 {
	color: var(--color-neutral-300);
}
.text-neutral-400 {
	color: var(--color-neutral-400);
}
.text-neutral-500 {
	color: var(--color-neutral-500);
}
.text-neutral-600 {
	color: var(--color-neutral-600);
}
.text-neutral-700 {
	color: var(--color-neutral-700);
}
.text-neutral-800 {
	color: var(--color-neutral-800);
}
.text-neutral-900 {
	color: var(--color-neutral-900);
}
.text-neutral-950 {
	color: var(--color-neutral-950);
}

.bg-neutral-50 {
	background-color: var(--color-neutral-50);
}
.bg-neutral-100 {
	background-color: var(--color-neutral-100);
}
.bg-neutral-200 {
	background-color: var(--color-neutral-200);
}
.bg-neutral-300 {
	background-color: var(--color-neutral-300);
}
.bg-neutral-400 {
	background-color: var(--color-neutral-400);
}
.bg-neutral-500 {
	background-color: var(--color-neutral-500);
}
.bg-neutral-600 {
	background-color: var(--color-neutral-600);
}
.bg-neutral-700 {
	background-color: var(--color-neutral-700);
}
.bg-neutral-800 {
	background-color: var(--color-neutral-800);
}
.bg-neutral-900 {
	background-color: var(--color-neutral-900);
}
.bg-neutral-950 {
	background-color: var(--color-neutral-950);
}

.border-primary-100 {
	border-color: var(--color-primary-100);
}
.border-primary-200 {
	border-color: var(--color-primary-200);
}
.border-primary-300 {
	border-color: var(--color-primary-300);
}
.border-primary-400 {
	border-color: var(--color-primary-400);
}
.border-primary-500 {
	border-color: var(--color-primary-500);
}
.border-primary-600 {
	border-color: var(--color-primary-600);
}

.border-neutral-100 {
	border-color: var(--color-neutral-100);
}
.border-neutral-200 {
	border-color: var(--color-neutral-200);
}
.border-neutral-300 {
	border-color: var(--color-neutral-300);
}
.border-neutral-400 {
	border-color: var(--color-neutral-400);
}
.border-neutral-500 {
	border-color: var(--color-neutral-500);
}
.border-neutral-600 {
	border-color: var(--color-neutral-600);
}

.bg-primary-gradient {
	background-image: radial-gradient(circle at top, var(--color-primary-200), transparent 60%),
		linear-gradient(135deg, var(--color-primary-50), var(--color-primary-100));
}

.btn-primary {
	background-color: var(--color-primary-600);
	color: white;
	box-shadow: 0 20px 40px -15px rgb(111 22 254 / 0.45);
}

.btn-primary:hover {
	background-color: var(--color-primary-700);
}

.btn-muted {
	background-color: white;
	color: var(--color-primary-700);
	border: 1px solid var(--color-primary-200);
}

.card-surface {
	background-color: rgb(255 255 255 / 0.9);
	border: 1px solid var(--color-primary-100);
	box-shadow: 0 15px 35px -20px rgb(47 13 104 / 0.35);
}

.focus\:ring-primary-200:focus {
	--tw-ring-color: var(--color-primary-200);
}
.focus\:ring-primary-300:focus {
	--tw-ring-color: var(--color-primary-300);
}
.focus\:ring-primary-500:focus {
	--tw-ring-color: var(--color-primary-500);
}
.focus\:border-primary-400:focus {
	border-color: var(--color-primary-400);
}
.hover\:text-primary-500:hover {
	color: var(--color-primary-500);
}
.hover\:text-primary-600:hover {
	color: var(--color-primary-600);
}
.hover\:text-primary-700:hover {
	color: var(--color-primary-700);
}
.hover\:bg-primary-600:hover {
	background-color: var(--color-primary-600);
}
.hover\:bg-primary-700:hover {
	background-color: var(--color-primary-700);
}
.hover\:border-primary-400:hover {
	border-color: var(--color-primary-400);
}
.hover\:border-primary-300:hover {
	border-color: var(--color-primary-300);
}

.bg-primary-50\/60 {
	background-color: color-mix(in srgb, var(--color-primary-50) 60%, transparent);
}
.bg-primary-50\/70 {
	background-color: color-mix(in srgb, var(--color-primary-50) 70%, transparent);
}
.bg-primary-50\/80 {
	background-color: color-mix(in srgb, var(--color-primary-50) 80%, transparent);
}
.bg-primary-800\/30 {
	background-color: color-mix(in srgb, var(--color-primary-800) 30%, transparent);
}
.bg-primary-400\/10 {
	background-color: color-mix(in srgb, var(--color-primary-400) 10%, transparent);
}
.border-primary-400\/40 {
	border-color: color-mix(in srgb, var(--color-primary-400) 40%, transparent);
}
.border-primary-700\/40 {
	border-color: color-mix(in srgb, var(--color-primary-700) 40%, transparent);
}
.hover\:bg-primary-400\/10:hover {
	background-color: color-mix(in srgb, var(--color-primary-400) 10%, transparent);
}