:root {
	/* ─── Color System ─── */
	--bg-primary: #faf8f3;
	--bg-secondary: #f3efe6;
	--bg-dark: #1a1a1a;
	--bg-dark-alt: #2c3e2d;
	--bg-card: #ffffff;

	--text-primary: #1f1f1f;
	--text-secondary: #5c5c5c;
	--text-muted: #8a8a8a;
	--text-inverse: #ffffff;
	--text-inverse-muted: rgba(255, 255, 255, 0.75);

	--accent: #5e8c61;
	--accent-hover: #4a754d;
	--accent-light: #e8f0e8;

	--link: #2c5f2d;
	--link-hover: #1e401f;

	--border: #e8e4dc;
	--border-light: #f0ece4;

	/* ─── Shadows ─── */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
	--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
	--shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* ─── Spacing Scale (8px base) ─── */
	--space-0: 0;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 5rem;
	--space-10: 6rem;
	--space-11: 8rem;

	/* ─── Typography ─── */
	--font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
	--font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	--font-script: 'Allura', cursive;
	--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;
	--text-6xl: 3.75rem;

	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;

	/* ─── Border Radius ─── */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 999px;

	/* ─── Transitions ─── */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 350ms ease;

	/* ─── Container ─── */
	--container-max: 1280px;
	--container-padding: 1rem;

	/* ─── Legacy aliases (for gradual migration) ─── */
	--white: #ffffff;
	--black: #1f1f1f;
	--gray-200: #e8e4dc;
	--gray-600: #5c5c5c;
	--gray-700: #4a4a4a;
	--blue-600: #2c5f2d;
	--blue-700: #1e401f;
}

@media (min-width: 768px) {
	:root {
		--container-padding: 2rem;
	}
}

/* ─── Base Styles ─── */
html {
	background-color: var(--bg-primary);
	font-family: var(--font-sans);
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	color: var(--text-primary);
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ─── Typography ─── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: var(--leading-tight);
	margin: 0 0 var(--space-4);
	color: var(--text-primary);
	letter-spacing: -0.02em;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
	margin: 0 0 var(--space-4);
	line-height: var(--leading-relaxed);
}

a {
	color: var(--link);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

/* ─── Universal Container ─── */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	width: 100%;
	box-sizing: border-box;
}

.container.narrow {
	max-width: 720px;
}

/* ─── Universal Section ─── */
section {
	padding: var(--space-9) var(--container-padding);
	box-sizing: border-box;
}

@media (min-width: 768px) {
	section {
		padding: var(--space-10) var(--container-padding);
	}
}

/* ─── Utility: Section backgrounds ─── */
.section-light {
	background-color: var(--bg-primary);
}

.section-dark {
	background-color: var(--bg-dark);
	color: var(--text-inverse);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
	color: var(--text-inverse);
}

.section-accent {
	background-color: var(--bg-secondary);
}

/* ─── Utility: Section header ─── */
.section-header {
	text-align: center;
	margin-bottom: var(--space-8);
}

.section-header h2 {
	margin-bottom: var(--space-3);
}

.section-header p {
	font-size: var(--text-lg);
	color: var(--text-secondary);
	max-width: 640px;
	margin: 0 auto;
}

/* ─── Utility: Cards ─── */
.card {
	background: var(--bg-card);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	overflow: hidden;
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* ─── Utility: Buttons ─── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: var(--radius-full);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: all var(--transition-base);
}

.btn-primary {
	background: var(--accent);
	color: var(--text-primary);
}

.btn-primary:hover {
	background: var(--accent-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.btn-secondary {
	background: var(--bg-card);
	color: var(--text-primary);
	border: 1px solid var(--border);
}

.btn-secondary:hover {
	background: var(--bg-secondary);
	border-color: var(--accent);
}

.btn-ghost {
	background: transparent;
	color: var(--text-primary);
	border: 1px solid var(--border);
}

.btn-ghost:hover {
	background: var(--bg-secondary);
}

.btn-lg {
	padding: var(--space-4) var(--space-6);
	font-size: var(--text-base);
}

.btn-sm {
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-xs);
}

/* ─── Utility: Tags / Pills ─── */
.pill {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-xs);
	font-weight: 500;
	border-radius: var(--radius-full);
	background: var(--bg-secondary);
	color: var(--text-secondary);
	border: 1px solid var(--border-light);
}

/* ─── Modals / Overlays ─── */
.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: var(--space-4);
}

.modal {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-modal);
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}

/* ─── Selection ─── */
::selection {
	background: var(--accent-light);
	color: var(--text-primary);
}

/* ─── Focus Styles ─── */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ─── Images ─── */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ─── Reduced Motion ───
   NOTE: Do NOT use a blanket `* { transition-duration: 0.01ms !important }` rule.
   That overrides every UI transition (accordions, modals, hovers, focus rings)
   and hurts usability. Instead, entrance animations in JS check
   `prefers-reduced-motion: reduce` and skip themselves.
   Only disable large motion effects (parallax, auto-scroll) here.
*/
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}