@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..600&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
	color-scheme: light;
	--ax-color-primary: #5b34d6;
	--ax-color-primary-dark: #4a29b0;
	--ax-color-primary-rgb: 91, 52, 214;
	--ax-color-primary-3: rgba(91, 52, 214, 0.09);
	--ax-color-primary-11: #3f2399;

	--ax-gray-1: #fcfbf8;
	--ax-gray-2: #faf8f4;
	--ax-gray-3: #f3efe8;
	--ax-gray-4: #ece6db;
	--ax-gray-5: #e3ddd1;
	--ax-gray-6: #d6cfc1;
	--ax-gray-7: #bcb4c0;
	--ax-gray-8: #9a93a6;
	--ax-gray-9: #8a8294;
	--ax-gray-10: #6f6880;
	--ax-gray-11: #544c5e;
	--ax-gray-12: #1a1622;

	--ax-gray-a3: rgba(26, 22, 34, 0.04);
	--ax-gray-a6: rgba(26, 22, 34, 0.12);

	--ax-color-peach: #36e0c8;

	--ax-color-dark: #0c0a14;
	--ax-color-dark-text: var(--ax-gray-12);
	--ax-color-dark-light: #2a2640;

	--ax-color-success: #3fa874;
	--ax-color-success-bg: #e3f3ea;
	--ax-color-success-text: #2a7d54;

	--ax-color-warning: #c9942f;
	--ax-color-warning-bg: #f9efd9;
	--ax-color-warning-text: #8a6418;

	--ax-color-danger: #e5484d;
	--ax-color-danger-bg: #fbe6e7;
	--ax-color-danger-text: #c5343a;

	--ax-font-primary: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
	--ax-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--ax-font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
	--ax-font-code: 'IBM Plex Mono', Consolas, monospace;
}

.login-brand::before {
	background: radial-gradient(circle, rgba(109, 68, 232, 0.22) 0%, transparent 70%);
}

.login-brand::after {
	background: radial-gradient(circle, rgba(54, 224, 200, 0.10) 0%, transparent 70%);
}

.login-brand h1 {
	font-family: var(--ax-font-display);
	font-optical-sizing: auto;
	font-size: 2rem;
	font-weight: 480;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.login-form-inner h2 {
	font-family: var(--ax-font-display);
	font-optical-sizing: auto;
	font-size: 1.75rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.error-message {
	font-family: var(--ax-font-display);
	font-optical-sizing: auto;
	font-size: 1.35rem;
	font-weight: 500;
}
