#index-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	text-align: center;
	color: var(--brand-white);
}

.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

/* horizontal grouping for multiple login providers */
.login-buttons {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

/* Github-styled button variant */
.login-button.github {
	background: #24292e; /* GitHub brand black */
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(2,6,23,0.08);
	border: 1px solid rgba(255,255,255,0.04);
}
.login-button.github:hover { box-shadow: 0 6px 18px rgba(2,6,23,0.12); transform: translateY(-1px); }
.login-button.github:active { transform: translateY(0); }

/* Use the generalized .button from root.css; add a primary modifier */
.login-button {
	background: linear-gradient(45deg, #4b6cff 0%, #0b5fff 100%);
	color: var(--brand-white);
	border: none;
	padding: 10px 18px;
	border-radius: 8px;
	font-weight: 600;
	min-width: 140px;
}
.login-button:hover,
.login-button:focus {
	filter: brightness(0.95);
}

/* Microsoft-styled white button variant */
.login-button.microsoft {
	background: #ffffff;
	color: #111827; /* dark text */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(2,6,23,0.08);
	border: 1px solid rgba(15,23,42,0.06);
}
.login-button.microsoft .ms-logo svg { display: block; }
.login-button.microsoft:hover { box-shadow: 0 6px 18px rgba(2,6,23,0.12); transform: translateY(-1px); }
.login-button.microsoft:active { transform: translateY(0); }