@font-face {
	font-family: 'CourierPrime-Regular';
	src: url('/fonts/CourierPrime-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

html {
	--font-family: 'CourierPrime-Regular', sans-serif;
	--radius: 8px;

	/* === Backgrounds & Foregrounds === */
	--background: 270 60% 98%; /* light lavender */
	--foreground: 258 40% 15%; /* deep purple */

	--card: 0 0% 100%;
	--card-foreground: 258 40% 15%;

	--popover: 270 40% 96%;
	--popover-foreground: 258 40% 15%;

	/* === Primary Theme === */
	--primary: 265 80% 60%; /* vibrant violet */
	--primary-foreground: 0 0% 100%;

	--secondary: 270 40% 90%; /* soft lilac */
	--secondary-foreground: 258 40% 25%;

	--accent: 265 90% 88%; /* light purple */
	--accent-foreground: 265 90% 20%;

	/* === Text Colors (Light Mode) === */
	--text-strong: 258 40% 10%; /* for headers / emphasis */
	--text-body: 258 35% 20%; /* general body text */
	--text-muted: 260 20% 45%; /* secondary, less important */
	--text-subtle: 260 15% 60%; /* for helper text / placeholders */
	--text-inverse: 0 0% 100%; /* on dark backgrounds */

	/* === Code Block Colors (Light Mode) === */
	--code-bg: 258 30% 20%; /* dark indigo-gray */
	--code-border: 258 20% 35%;
	--code-text: 265 70% 85%; /* soft violet/white */

	/* === Border & Inputs === */
	--border: 270 20% 85%;
	--input: 270 30% 95%;
	--ring: 265 80% 60%;

	/* === Muted UI === */
	--muted: 270 30% 94%;
	--muted-foreground: 265 20% 35%;

	/* === Status Colors === */
	--success: 140 60% 45%; /* green */
	--success-foreground: 0 0% 100%;

	--warning: 40 100% 60%; /* amber */
	--warning-foreground: 0 0% 0%;

	--destructive: 0 80% 60%; /* red */
	--destructive-foreground: 0 0% 100%;

	/* === Utility Colors === */
	--color-white: 0 0% 100%;
	--color-black: 258 40% 10%;
	--color-gray: 270 10% 60%;
	--text-alternate: 260 20% 50%;
}

html.dark {
	--background: 258 30% 12%; /* deep violet */
	--foreground: 270 30% 95%; /* soft lavender text */

	--card: 258 30% 16%;
	--card-foreground: 270 30% 95%;

	--popover: 258 25% 18%;
	--popover-foreground: 270 30% 95%;

	--primary: 265 80% 60%;
	--primary-foreground: 0 0% 100%;

	--secondary: 258 25% 30%;
	--secondary-foreground: 270 30% 95%;

	--accent: 265 40% 35%;
	--accent-foreground: 265 80% 90%;

	--border: 270 15% 30%;
	--input: 270 20% 20%;
	--ring: 265 80% 60%;

	--muted: 258 20% 25%;
	--muted-foreground: 258 20% 75%;

	/* === Text Colors (Dark Mode) === */
	--text-strong: 270 30% 98%; /* bright text for headings */
	--text-body: 270 25% 90%; /* standard readable body */
	--text-muted: 270 15% 70%; /* less emphasized */
	--text-subtle: 270 10% 50%; /* placeholder / hint */
	--text-inverse: 258 30% 10%; /* dark text on light elements */

	/* === Code Block Colors (Dark Mode) === */
	--code-bg: 270 40% 95%; /* soft lavender */
	--code-border: 270 20% 85%;
	--code-text: 258 40% 15%;

	/* === Status Colors === */
	--success: 140 60% 40%; /* dark green */
	--success-foreground: 140 70% 90%;

	--warning: 40 100% 50%; /* warm amber */
	--warning-foreground: 40 100% 90%;

	--destructive: 0 60% 45%; /* red */
	--destructive-foreground: 0 0% 100%;

	/* === Utility Colors === */
	--color-white: 0 0% 100%;
	--color-black: 0 0% 0%;
	--color-gray: 270 5% 65%;
	--text-alternate: 270 10% 85%;
}

body {
	font-family: var(--font-family);
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

section {
	margin: 0 auto;
	box-sizing: border-box;
	width: 100%;
	max-width: 1400px;
	padding: 0 1rem;
}

.container {
	margin: 0 auto;
	padding: 16px;
}

.button {
	background-color: hsl(var(--primary));
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.button:hover {
	background-color: hsl(var(--primary) / 0.8);
}