@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css') layer(theme);

@layer theme {
	/* Dark Theme */
	:root {
		/* Site wrapper Layer */
		--container-bg-primary: #222; /* Deep charcoal - dark but not harsh pure black */
		--container-bg-secondary: #2d2d2d; /* Slightly lighter charcoal for subtle depth */
		--container-bg-accent: #333; /* Medium charcoal for interactive elements */
		--container-bg-texture: linear-gradient(to bottom, var(--container-bg-secondary), var(--container-bg-primary));

		--container-text-color: #e0e0e0; /* Soft light gray - easy to read without glare */
		--container-text-muted: #b0b0b0; /* Dimmed gray for secondary text */
		--container-text-accent: #ffffff; /* Pure white for maximum emphasis */

		--container-link-color: #d4af37; /* Antique gold - warm, readable, classic dark mode */
		--container-link-accent: #e8c766; /* Brighter gold for hover state */
		--container-link-on-color: #1a1a1a; /* dark text on gold links */

		--container-selection-bg: #4a4a4a; /* Medium gray highlight */
		--container-selection-fg: #ffffff; /* White selected text for contrast */

		/* Application Layer */
		--main-bg-primary: #1a1a1a; /* Very dark gray - deeper than container for visual layering */
		--main-bg-secondary: #1f1f1f; /* Slightly lighter for gradient variation */
		--main-bg-accent: #2a2a2a; /* Elevated surface color for cards/hovers */
		--main-bg-texture: linear-gradient(135deg, var(--main-bg-secondary), var(--main-bg-primary));

		--main-text-color: #e0e0e0; /* Consistent with container text */
		--main-text-muted: #999; /* Neutral medium gray for de-emphasized content */
		--main-text-accent: #ffffff; /* Pure white for headings and emphasis */
		--main-text-highlight: #4a4a1a; /* Dark olive-yellow for text highlights/marks */

		--main-link-color: #d4af37; /* Antique gold - matches container for consistency */
		--main-link-accent: #e8c766; /* Brighter gold hover */
		--main-link-on-color: #1a1a1a; /* dark text on gold links */

		--main-selection-bg: #4a4a4a; /* Consistent selection across layers */
		--main-selection-fg: #ffffff; /* High contrast selected text */

		--main-border: #3a3a3a; /* Subtle border - visible but not harsh */

		/* Transformation Layer */
		--wash-strong: rgba(255, 255, 255, 0.2); /* Strong lightening overlay */
		--wash-accent: rgba(255, 255, 255, 0.15); /* Moderate lightening for emphasis */
		--wash-muted: rgba(0, 0, 0, 0.15); /* Subtle darkening */
		--wash-subtle: rgba(255, 255, 255, 0.05); /* Very subtle lightening */
	}
}