/* --- GLOBAL FONTS --- */
:root {
	--pico-font-family-sans: 'Inter', system-ui, sans-serif;
	--pico-font-family-monospace: 'JetBrains Mono', monospace;
	--pico-font-family: var(--pico-font-family-sans);
}

/* Explicitly apply monospace font family to code elements */
pre,
code,
kbd,
samp {
	font-family: var(--pico-font-family-monospace);
	font-size: 0.9em; /* Slightly scale down for optimal visual alignment */
}

/* --- THEME: LIGHT MODE (Soft Lavender) --- */
[data-theme='light'],
:root:not([data-theme='dark']) {
	--pico-primary: #a78bfa;
	--pico-primary-background: #a78bfa;
	--pico-primary-hover: #8b5cf6;
	--pico-primary-hover-background: #8b5cf6;
	--pico-primary-focus: rgba(167, 139, 250, 0.3);
	--pico-primary-inverse: #2e1065;
	--pico-background-color: #faf5ff;
	--pico-color: #2e1065;

	/* Card/Article Colors */
	--pico-card-background-color: #ffffff;
	--pico-card-sectioning-background-color: #f5f0ff;
	--pico-card-border-color: rgba(167, 139, 250, 0.2);
	--pico-card-box-shadow: 0 4px 12px rgba(46, 16, 101, 0.04);

	/* Code Block Colors */
	--pico-code-background-color: #f3ebff;
	--pico-code-color: #6d28d9;
}

/* --- THEME: DARK MODE (Glowing Lilac - Auto-detected by OS) --- */
@media only screen and (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--pico-primary: #c4b5fd;
		--pico-primary-background: #c4b5fd;
		--pico-primary-hover: #ddd6fe;
		--pico-primary-hover-background: #ddd6fe;
		--pico-primary-focus: rgba(196, 181, 253, 0.3);
		--pico-primary-inverse: #2e1065;
		--pico-background-color: #171522;
		--pico-color: #f3e8ff;

		/* Card/Article Colors */
		--pico-card-background-color: #201d2f;
		--pico-card-sectioning-background-color: #1a1826;
		--pico-card-border-color: rgba(196, 181, 253, 0.1);
		--pico-card-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

		/* Code Block Colors */
		--pico-code-background-color: #221c2e;
		--pico-code-color: #ddd6fe;
	}
}

/* --- THEME: DARK MODE (Forced by the toggle switch) --- */
[data-theme='dark'] {
	--pico-primary: #c4b5fd;
	--pico-primary-background: #c4b5fd;
	--pico-primary-hover: #ddd6fe;
	--pico-primary-hover-background: #ddd6fe;
	--pico-primary-focus: rgba(196, 181, 253, 0.3);
	--pico-primary-inverse: #2e1065;
	--pico-background-color: #171522;
	--pico-color: #f3e8ff;

	/* Card/Article Colors */
	--pico-card-background-color: #201d2f;
	--pico-card-sectioning-background-color: #1a1826;
	--pico-card-border-color: rgba(196, 181, 253, 0.1);
	--pico-card-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

	/* Code Block Colors */
	--pico-code-background-color: #221c2e;
	--pico-code-color: #ddd6fe;
}

/* --- LAYOUT FIXES --- */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
main {
	flex-grow: 1;
}
footer {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/* --- CARD & PRE/CODE BORDER STYLING --- */
article {
	border: 1px solid var(--pico-card-border-color);
}
pre {
	background-color: var(--pico-code-background-color);
	border: 1px solid var(--pico-card-border-color);
}
pre code {
	color: var(--pico-code-color);
}

/* --- FOOTER MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
	footer nav {
		flex-direction: column;
		gap: 1.5rem;
		text-align: center;
	}

	footer nav ul {
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
}

/* Force Prism to use JetBrains Mono */
code[class*='language-'],
pre[class*='language-'] {
	font-family: var(--pico-font-family-monospace) !important;
}

/* Optional: If you want Prism's background to match your theme's purple background exactly */
pre[class*='language-'] {
	background-color: var(--pico-code-background-color) !important;
	border: 1px solid var(--pico-card-border-color);
	box-shadow: none;
}