/**
 * Vantegris design system — overrides legacy Legarithm tokens.
 *
 * Mapping (legacy → design):
 * --primary-0…3   → Indigo 01–06 (backgrounds / interactive)
 * --primary-4…6   → Indigo 09–11 (brand, hover, active)
 * --primary-7…12  → Indigo 06–11 + Grey (muted / text)
 * --primary-13…16 → Indigo 12 (dark surfaces & headings)
 * --gray-*        → Grey 01–12
 * --success/warning/error → Green / Amber / Red scales
 */

:root {
	--font-family: "Mulish", sans-serif;
	--second-family: "Satoshi", sans-serif;
	--third-family: "Inter", sans-serif;

	/* Grey */
	--gray-1: #ffffff;
	--gray-2: #f9f9f9;
	--gray-3: #f1f1f1;
	--gray-4: #ebebeb;
	--gray-5: #d7d7d7;
	--gray-6: #c1c1c1;
	--gray-7: #acacac;
	--gray-8: #8e8e8e;
	--gray-9: #6b6b6b;
	--gray-10: #575757;
	--gray-11: #3d3d3d;
	--gray-12: #121212;
	--gray-13: #121212;

	/* Indigo (primary brand) */
	--primary-0: #f8f9ff;
	--primary-1: #e0e3ff;
	--primary-1_1: #f2f3ff;
	--primary-2: #b6bcff;
	--primary-3: #8e96ff;
	--primary-4: #4f56ff;
	--primary-5: #3d43cc;
	--primary-6: #21256e;
	--primary-7: #8e96ff;
	--primary-8: #8e8e8e;
	--primary-9: #6b6b6b;
	--primary-10: #21256e;
	--primary-11: #21256e;
	--primary-12: #21256e;
	--primary-13: #0d0f2b;
	--primary-14: #0d0f2b;
	--primary-15: #16183d;
	--primary-16: #0d0f2b;

	/* Purple (accent) */
	--purple-1: #fbf9ff;
	--purple-2: #f8f5ff;
	--purple-3: #8162ff;

	/* Semantic */
	--warning-1: #fffbeb;
	--warning-2: #fde68a;
	--warning-3: #d97706;
	--error-1: #fef2f2;
	--error-2: #fecaca;
	--error-3: #ef4444;
	--error-4: #991b1b;
	--success-1: #f0fff4;
	--success-2: #b1f5c8;
	--success-3: #1cc45c;

	/* Cyan (info / former teal accents) */
	--light-green-1: #f1fbff;
	--light-green-2: #b8efff;
	--light-green-3: #0099bd;

	--pink-1: #fbf9ff;
	--pink-2: #ebe6ff;
	--pink-3: #8162ff;

	--border: #d7d7d7;

	/* Named design tokens */
	--indigo-09: #4f56ff;
	--indigo-10: #3d43cc;
	--indigo-11: #21256e;
	--indigo-04: #e0e3ff;
	--grey-12: #121212;

	/* Component aliases (nav / cards) */
	--primary-button-bg: var(--primary-4);
	--primary-button-text: var(--gray-1);
	--secondary-button-bg: var(--primary-1);
	--secondary-button-text: var(--primary-6);
	--primary-button-icon-color: var(--primary-4);
	--secondary-button-icon-color: var(--primary-6);
	--link-button-text: var(--primary-4);
}

/* Buttons — match Vantegris UI kit */
.btn {
	border-radius: 0.5rem;
	font-weight: 600;
}

.btn--primary {
	background-color: var(--indigo-09);
	color: #fff;
}

.btn--primary:focus,
.btn--primary:hover {
	background-color: var(--indigo-10);
	color: #fff;
}

.btn--primary:active {
	background-color: var(--indigo-11);
	color: #fff;
}

.btn--primary:disabled {
	background-color: var(--gray-4);
	color: var(--gray-7);
	cursor: not-allowed;
}

.btn--primary i {
	background-color: transparent;
	color: inherit;
}

.btn--secondary {
	background-color: var(--indigo-04);
	color: var(--indigo-11);
}

.btn--secondary:focus,
.btn--secondary:hover {
	background-color: var(--primary-2);
	color: var(--indigo-11);
}

.btn--secondary:active {
	background-color: var(--primary-3);
	color: var(--indigo-11);
}

.btn--transparent,
.btn--social {
	color: var(--indigo-09);
}

.btn--transparent:focus,
.btn--transparent:hover,
.btn--social:focus,
.btn--social:hover {
	color: var(--indigo-10);
}

.btn--transparent:active,
.btn--social:active {
	color: var(--indigo-11);
}

.btn--transparent i {
	color: var(--indigo-09);
}

a {
	color: var(--primary-4);
}

.input:focus {
	border-color: var(--primary-4);
}

.input:hover {
	border-color: var(--gray-7);
}