@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,800&display=swap');

:root {
	/* Toastmasters International brand colors, sampled from toastmasters.org */
	--color-navy: #004165;
	--color-navy-dark: #022a3a;
	--color-blue: #035fc2;
	--color-maroon: #772432;
	--color-white: #ffffff;
	--color-bg-light: #f5f5f5;
	--color-border: #e1e1e1;
	--color-text: #262d31;
	--color-text-muted: #4d5c65;

	/* Semantic surface/heading tokens — separate from the raw brand colors above
	   so components can stay adaptive when the dark-mode block below repoints them. */
	--color-page-bg: var(--color-white);
	--color-surface-alt: var(--color-bg-light);
	--color-card-bg: var(--color-white);
	--color-heading: var(--color-navy-dark);
	--color-accent: var(--color-navy);

	--font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--radius: 14px;
	--shadow-md: 0 10px 30px rgba(2, 42, 58, 0.12);
	--shadow-lg: 0 24px 60px rgba(2, 42, 58, 0.18);
	--container-width: 1160px;

	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-page-bg: #0b1720;
		--color-surface-alt: #0f2029;
		--color-card-bg: #122530;
		--color-border: #2c4a58;
		--color-text: #d7e0e5;
		--color-text-muted: #9db0b9;
		--color-heading: #f2f6f8;
		--color-blue: #59a8ff;
		--color-maroon: #d97a8a;
		--color-accent: #4f9ae0;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-page-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-sans);
	color: var(--color-heading);
	line-height: 1.15;
	margin: 0 0 0.5em;
}

h1,
h2 {
	font-family: var(--font-display);
	font-weight: 600;
}

p {
	margin: 0 0 1em;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: var(--color-blue);
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.eyebrow {
	display: inline-block;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-blue);
	margin-bottom: 0.75em;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.85em 1.6em;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn-primary {
	background: var(--color-maroon);
	color: var(--color-white);
	box-shadow: var(--shadow-md);
}

.btn-primary:hover {
	background: #8a2b3c;
}

.btn-secondary {
	background: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
}

.btn-secondary:hover {
	background: rgba(255, 255, 255, 0.12);
}

.btn-outline {
	background: transparent;
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.btn-outline:hover {
	background: var(--color-accent);
	color: var(--color-white);
}