/* ============================================
   Theme — Global Design Tokens & Base Styles
   ============================================ */

/* --- Google Fonts --- */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

/* --- Design Tokens --- */
:root {
	--color-primary: #1a6bcc;
	--color-primary-light: #e8f1fb;
	--color-primary-dark: #0f4a96;
	--color-accent: #ceb01e;
	--color-accent-light: #fffbdc;
	--color-bg: #f7f9fc;
	--color-surface: #ffffff;
	--color-text: #1a1f2e;
	--color-text-muted: #6b7280;
	--color-border: #dde3ef;

	--radius-sm: 0.5rem;
	--radius-md: 0.875rem;
	--radius-lg: 1.375rem;

	--shadow-card: 0 0.125rem 0.75rem rgba(26, 107, 204, 0.08);
	--shadow-card-hover: 0 0.5rem 1.75rem rgba(26, 107, 204, 0.16);

	--font-display: "DM Sans", sans-serif;
	--font-body: "DM Sans", sans-serif;

	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 3rem;
	--spacing-xl: 5rem;
}

/* --- Base --- */
body {
	font-family: var(--font-body);
	background-color: var(--color-bg);
	color: var(--color-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* --- Typography --- */
h1,
h2,
h3 {
	font-family: var(--font-display);
}

h1 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-primary);
}

h2 {
	font-size: clamp(1.4rem, 3vw, 2rem);
	color: var(--color-primary-dark);
}

p {
	color: var(--color-text-muted);
}

/* --- Buttons --- */
.btn-primary,
.btn-yellow,
.btn-blue {
	display: inline-block;
	color: #ffffff;
	padding: 0.75rem 1.75rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 1rem;
	font-family: var(--font-body);
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

button.btn-primary {
	background-color: var(--color-primary);
	padding: 1.5rem 4rem;
	border-radius: var(--radius-md);
	font-size: 1.5rem;

	@media screen and (width < 768px) {
		max-width: 80%;
		font-size: 1.3rem;
	}

	&:hover {
		background-color: var(--color-primary-dark);
		transform: translateY(-0.125rem);
	}
}

.btn-yellow {
	background-color: var(--color-accent);

	&:hover {
		background-color: #958016;
		transform: translateY(-0.125rem);
	}
}

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

	&:hover {
		background-color: var(--color-primary-dark);
		transform: translateY(-0.125rem);
	}
}

/* --- Footer --- */
footer {
	width: 100%;
	text-align: center;
	padding: var(--spacing-lg) var(--spacing-md);
	margin-top: auto;
	font-size: 0.85rem;

	.us {
		color: var(--color-primary);

		.student-name {
			font-weight: 600;
		}
	}

	.them {
		color: var(--color-text-muted);
	}
}