/* ===================================================================
   1. CSS CUSTOM PROPERTIES (COLORS & SPACING)
================================================================== */

:root {
	color-scheme: light dark;

	/* Base colors (light mode) */
	--bg: #fbf1c7;
	--bg-alt: #f9f5d7;
	--panel: #f2e5bc;
	--fg: #3c3836;
	--muted: #665c54;
	--border: #7c6f64;

	--accent-primary: #cc241d;
	--accent-secondary: #076678;

	/* Link colors */
	--link: var(--accent-primary);
	--visited: #b16286;
	--link-hover: #9d0006;

	/* Selection */
	--selection-bg: #d65d0e;
	--selection-fg: #fbf1c7;

	/* Navigation rainbow colors */
	--nav-red: #cc241d;
	--nav-orange: #d65d0e;
	--nav-yellow: #d79921;
	--nav-green: #98971a;
	--nav-aqua: #689d6a;
	--nav-blue: #458588;
	--nav-purple: #b16286;

	/* Spacing scale */
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
}

/* Dark mode - system preference */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #282828;
		--bg-alt: #32302f;
		--panel: #1d2021;
		--fg: #ebdbb2;
		--muted: #a89984;
		--border: #504945;

		--accent-primary: #83a598;
		--accent-secondary: #fb4934;

		--link: var(--accent-primary);
		--visited: #d3869b;
		--link-hover: #b3d7ff;

		--selection-bg: var(--accent-secondary);
		--selection-fg: #1d2021;

		--nav-red: #fb4934;
		--nav-orange: #fe8019;
		--nav-yellow: #fabd2f;
		--nav-green: #b8bb26;
		--nav-aqua: #8ec07c;
		--nav-blue: #83a598;
		--nav-purple: #d3869b;
	}
}

/* Manual theme toggle - light mode */
:root.light-mode {
	--bg: #fbf1c7;
	--bg-alt: #f9f5d7;
	--panel: #f2e5bc;
	--fg: #3c3836;
	--muted: #665c54;
	--border: #7c6f64;

	--accent-primary: #cc241d;
	--accent-secondary: #076678;

	--link: var(--accent-primary);
	--visited: #b16286;
	--link-hover: #9d0006;

	--selection-bg: #d65d0e;
	--selection-fg: #fbf1c7; 

	--nav-red: #cc241d;
	--nav-orange: #d65d0e;
	--nav-yellow: #b57614;
	--nav-green: #79740e;
	--nav-aqua: #6a9e4f;
	--nav-blue: #076678;
	--nav-purple: #8f3f71;
}

/* Manual theme toggle - dark mode */
:root.dark-mode {
	--bg: #282828;
	--bg-alt: #32302f;
	--panel: #1d2021;
	--fg: #ebdbb2;
	--muted: #a89984;
	--border: #504945;

	--accent-primary: #83a598;
	--accent-secondary: #fb4934;

	--link: var(--accent-primary);
	--visited: #d3869b;
	--link-hover: #b3d7ff;

	--selection-bg: var(--accent-secondary);
	--selection-fg: #1d2021;

	--nav-red: #fb4934;
	--nav-orange: #fe8019;
	--nav-yellow: #fabd2f;
	--nav-green: #b8bb26;
	--nav-aqua: #8ec07c;
	--nav-blue: #83a598;
	--nav-purple: #d3869b;
}

/* Dark mode blockquotes */
:root.dark-mode blockquote,
.dark-mode blockquote {
	color: #ffffff !important;
	background: #585858 !important;
}

:root.dark-mode .e-content blockquote,
.dark-mode .e-content blockquote {
	color: #ffffff !important;
	background: #1a1a1a !important;
}

/* Dark mode syntax highlighting */
:root.dark-mode .token.comment,
:root.dark-mode .token.prolog,
:root.dark-mode .token.doctype,
:root.dark-mode .token.cdata {
	color: #928374;
}

:root.dark-mode .token.punctuation {
	color: #ebdbb2;
}

:root.dark-mode .token.property,
:root.dark-mode .token.tag,
:root.dark-mode .token.boolean,
:root.dark-mode .token.number,
:root.dark-mode .token.constant,
:root.dark-mode .token.symbol,
:root.dark-mode .token.deleted {
	color: #d3869b;
}

:root.dark-mode .token.selector,
:root.dark-mode .token.attr-name,
:root.dark-mode .token.string,
:root.dark-mode .token.char,
:root.dark-mode .token.builtin,
:root.dark-mode .token.inserted {
	color: #b8bb26;
}

:root.dark-mode .token.operator,
:root.dark-mode .token.entity,
:root.dark-mode .token.url,
:root.dark-mode .language-css .token.string,
:root.dark-mode .style .token.string {
	color: #fe8019;
}

:root.dark-mode .token.atrule,
:root.dark-mode .token.attr-value,
:root.dark-mode .token.keyword {
	color: #83a598;
}

:root.dark-mode .token.function,
:root.dark-mode .token.class-name {
	color: #fabd2f;
}

:root.dark-mode .token.regex,
:root.dark-mode .token.important,
:root.dark-mode .token.variable {
	color: #fb4934;
}