/* Import color scheme from main.css */
:root {
	/* Core colors from main.css */
	--deep-navy: #0e152b;
	--deep-teal-navy: #073646;
	--bright-teal: #058797;
	--steel-blue: #205295;
	--ocean-blue: #144272;

	--jade-green: #009e60;
	--amber-gold: #f68803;
	--raspberry-red: #d21f3c;
	--deep-cyan: #0288a4;

	--muted-teal: #66b2b2;
	--slate-grey: #d3dce4;
	--light-blue: #4a90e2;
	--light-grey: #e4e8ec;
	--off-white: #f5f7fa;
	--almost-black: #1e1e1e;
	--white: #ffffff;
	--coral-grey: #54626f;

	--jade-light: #b6f2d3;
	--amber-light: #ffe2b2;
	--raspberry-light: #f9c8d0;
	--steel-blue-light: #c3d9f4;
	--black-coral-light: #f1efee;
	--muted-grey: #a9a9a9;

	/* Font sizes from main.css */
	--font-12: 12px;
	--font-13: 13px;
	--font-14: 14px;
	--font-15: 15px;
	--font-16: 16px;
	--font-18: 18px;
	--font-20: 20px;
	--font-24: 24px;
	--font-26: 26px;
	--font-32: 32px;
	--font-36: 36px;
	--font-40: 40px;

	/* Font families from main.css */
	--font-primary: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-secondary: "Georgia", "Times New Roman", serif;
	--font-mono: "Courier New", Courier, monospace;

	/* Font weights from main.css */
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Font styles from main.css */
	--font-style-normal: normal;
	--font-style-italic: italic;

	/* Auth-specific aliases using main.css colors */
	--primary-color: var(--steel-blue);
	--primary-hover: var(--ocean-blue);
	--background-color: var(--off-white);
	--card-background: var(--white);
	--text-primary: var(--almost-black);
	--text-secondary: var(--coral-grey);
	--text-muted: var(--muted-grey);
	--border-color: var(--light-grey);
	--error-color: var(--raspberry-red);
	--error-background: var(--raspberry-light);
	--success-color: var(--jade-green);
	--input-focus: var(--bright-teal);
	--shadow-light: 0 1px 3px 0 rgba(14, 21, 43, 0.1);
	--shadow-medium: 0 4px 6px -1px rgba(14, 21, 43, 0.15);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--font-primary);
}

body {
	background: linear-gradient(
		135deg,
		var(--deep-navy) 0%,
		var(--deep-teal-navy) 100%
	);
	color: var(--text-primary);
	line-height: 1.6;
	font-size: var(--font-16);
	min-height: 100vh;
}

.auth-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.auth-card {
	background: var(--white);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(14, 21, 43, 0.1);
	padding: 30px;
	width: 100%;
	max-width: 380px;
	border: 1px solid var(--light-grey);
}

.auth-header {
	text-align: center;
	margin-bottom: 25px;
}

.auth-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
}

.auth-logo img {
	width: 35px;
	height: 35px;
	overlay: var(--steel-blue);
}

.auth-logo h1 {
	color: var(--steel-blue);
	font-size: var(--font-26);
	font-weight: var(--font-weight-bold);
}

.auth-header h2 {
	color: var(--text-primary);
	font-size: var(--font-20);
	font-weight: var(--font-weight-semibold);
	margin-bottom: 8px;
}

.auth-header p {
	color: var(--text-secondary);
	font-size: var(--font-14);
	font-weight: var(--font-weight-regular);
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.form-group label {
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-13);
}

.form-group input {
	padding: 10px 16px;
	border: 1px solid var(--coral-grey);
	border-radius: 8px;
	font-size: var(--font-15);
	background-color: var(--white);
	color: var(--text-primary);
	transition: border-color 0.2s ease;
	font-family: var(--font-primary);
}

.form-group input:focus {
	outline: none;
	border-color: var(--steel-blue);
}

/* Password input container styles */
.password-input-container {
	position: relative;
	display: flex;
	align-items: center;
}

.password-input-container input {
	padding-right: 45px;
	width: 100%;
}

.password-toggle {
	position: absolute;
	right: 12px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
	transition: color 0.2s ease;
	border-radius: 4px;
}

.password-toggle:hover {
	color: var(--steel-blue);
}

.password-toggle:focus {
	color: var(--steel-blue);
}

.password-toggle svg {
	width: 20px;
	height: 20px;
}

.form-options {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	margin: 4px 0;
}

.forgot-link {
	color: var(--primary-color);
	text-decoration: none;
	font-size: var(--font-14);
	font-weight: var(--font-weight-semibold);
	transition: color 0.25s ease;
}

.forgot-link:hover {
	color: var(--primary-hover);
	text-decoration: underline;
}

.btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--steel-blue);
	color: var(--white);
	border: none;
	border-radius: 8px;
	padding: 12px 20px;
	font-size: var(--font-15);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	transition: background-color 0.2s ease;
	margin-top: 8px;
	font-family: var(--font-primary);
	width: 100%;
}

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

.btn-primary svg {
	width: 20px;
	height: 20px;
}

.error-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

.error-message {
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: var(--raspberry-light);
	color: var(--error-color);
	padding: 10px 14px;
	border-radius: 6px;
	border: 1px solid var(--error-color);
	font-size: var(--font-13);
	font-weight: var(--font-weight-regular);
}

@keyframes slideInError {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.error-message svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.auth-footer {
	text-align: center;
	margin-top: 25px;
	padding-top: 20px;
	border-top: 1px solid var(--light-grey);
}

.auth-footer p {
	color: var(--text-secondary);
	font-size: var(--font-13);
	font-weight: var(--font-weight-regular);
	margin-bottom: 12px;
}

.auth-footer a {
	color: var(--steel-blue);
	text-decoration: none;
	font-weight: var(--font-weight-medium);
}

.auth-footer a:hover {
	text-decoration: underline;
}

.back-to-home a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-secondary);
	text-decoration: none;
	font-size: var(--font-13);
	font-weight: var(--font-weight-regular);
}

.back-to-home a:hover {
	color: var(--text-secondary);
}

.back-to-home svg {
	width: 16px;
	height: 16px;
}

/* Responsive Design */
@media (max-width: 480px) {
	.auth-card {
		padding: 25px 20px;
		margin: 10px;
		max-width: calc(100vw - 20px);
	}

	.form-options {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* Loading animation for button */
.btn-primary.loading {
	pointer-events: none;
	opacity: 0.8;
}

.btn-primary.loading::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	border: 2px solid transparent;
	border-top: 2px solid var(--white);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.auth-card {
		border-width: 4px;
		box-shadow: none;
	}

	.form-group input {
		border-width: 3px;
	}

	.btn-primary {
		border: 2px solid var(--white);
	}
}