:root {
	/* Color Palette */
	--text-dark: #111111;
	--text-lighter: rgba(17, 17, 17, 0.5);
	--divider: rgba(17, 17, 17, 0.5);
	--divider-thin: rgba(17, 17, 17, 0.2);
	--background-light: #ECECEC;
	--background-light-nav: rgba(236, 236, 236, 0.5);
	--accent-blue: #4C6A92;

	/* Typography */
	--font-main: 'Instrument Sans', sans-serif;

	/* Responsive Typography & Spacing */
	--font-size-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--font-size-heading: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	--container-padding: clamp(1.25rem, 5vw, 4rem);

}

body {
	font-family: var(--font-main);
	margin: 0;
	background-color: var(--background-light);
	color: var(--text-main);
	transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] {
	--text-dark: #F5F5F5;
	--text-lighter: rgba(245, 245, 245, 0.5);
	--divider: rgba(245, 245, 245, 0.2);
	--divider-thin: rgba(245, 245, 245, 0.1);
	--background-light: #121212;
	--background-light-nav: rgba(18, 18, 18, 0.5);
	--accent-blue: #6B8CBA;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--text-dark: #F5F5F5;
		--text-lighter: rgba(245, 245, 245, 0.5);
		--divider: rgba(245, 245, 245, 0.2);
		--divider-thin: rgba(245, 245, 245, 0.1);
		--background-light: #121212;
		--background-light-nav: rgba(18, 18, 18, 0.5);
		--accent-blue: #6B8CBA;
	}
}