/* styles.css */
/* 0) Indica a los UA que tienes both themes para controles nativos (scrollbars, inputs, etc.) */
:root {
	color-scheme: light dark;
}

/* 1) BASE → Modo claro (lo que ya tienes) */
:root {
	--header: #001c4c;
	--bg: #ffffff;
	--page-bg: #e7e7ed;
	--container-bg: #fff;
	--container-bg-active: #f8f8f8;
	--day-bg: #ffffff;
	--arrow-bg: #00000099;
	--day: #e9f1f8;
	--day-read-fg: gold;
	--fg: #222222;
	--bg-alt: #eaeff9;
	--border-alt: #001c4c;
	--border: #ccc;
	--highlight: #001c4c;
	--link: #3c73d1;
	--section-bg: #ede9e9;
	--overlay: rgba(0, 120, 255, 0.1);
	--button-bg: #fff;
	--button-fg: #000;
	--button-selected-bg: #001c4c;
	--button-selected-fg: #fff;
	--accent: gold;
	--fg-lv: #001c4c;
	--fill: #000;
	--arrow-fill: #fff;
	--menu: #fff;
	--sections-bg: #fff;
	--epi-color: #001c4c;
	--autor-color: #4b5563;
	--surface-elevated: #f3f3f3;
	--border-subtle: #cccccc;
	--font-family-sans-serif: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-family-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--aspect-ratio: 0.76;
}

/* 2) AUTO → Si el sistema del usuario está en dark, sobreescribe variables */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #222;
		--page-bg: #222;
		--container-bg: #000;
		--container-bg-active: #444;
		--day-bg: #222;
		--arrow-bg: #40484c;
		--day: #222;
		--day-read-fg: #555;
		--fg: #fff;
		--bg-alt: #333;
		--border-alt: #e2e9f8;
		--border: #666;
		--highlight: #90caf9;
		--link: #90caf9;
		--section-bg: #40484c;
		--overlay: #0000001a;
		--button-bg: #40484c;
		--button-fg: #eee;
		--button-selected-bg: #90caf9;
		--button-selected-fg: #000;
		--accent: #ffd700;
		--fg-lv: #fff;
		--fill: #fff;
		--arrow-fill: #ffffff;
		--menu: #40484c;
		--sections-bg: #000;
		--epi-color: #90caf9;
		--autor-color: #f3f3f3;
	}
}

/* 3) FORZADO → Si el usuario pulsa tu toggle, estas clases tienen la ÚLTIMA palabra */
/* Forzar oscuro */
html.dark-mode,
body.dark-mode {
	color-scheme: dark;

	--bg: #222;
	--page-bg: #222;
	--container-bg: #000;
	--container-bg-active: #444;
	--day-bg: #222;
	--arrow-bg: #40484c;
	--day: #222;
	--day-read-fg: #555;
	--fg: #fff;
	--bg-alt: #333;
	--border-alt: #e2e9f8;
	--border: #666;
	--highlight: #90caf9;
	--link: #90caf9;
	--section-bg: #40484c;
	--overlay: #0000001a;
	--button-bg: #40484c;
	--button-fg: #eee;
	--button-selected-bg: #90caf9;
	--button-selected-fg: #000;
	--accent: #ffd700;
	--fg-lv: #fff;
	--fill: #fff;
	--arrow-fill: #ffffff;
	--menu: #40484c;
	--sections-bg: #000;
	--epi-color: #90caf9;
	--autor-color: #f3f3f3;
}

/* Forzar claro (útil para “volver” a light aunque el SO esté en dark) */
html.light-mode,
body.light-mode {
	color-scheme: light;

	--bg: #ffffff;
	--page-bg: #e7e7ed;
	--container-bg: #fff;
	--container-bg-active: #f8f8f8;
	--day-bg: #ffffff;
	--arrow-bg: #00000099;
	--day: #e9f1f8;
	--day-read-fg: gold;
	--fg: #222222;
	--bg-alt: #eaeff9;
	--border-alt: #001c4c;
	--border: #ccc;
	--highlight: #001c4c;
	--link: #3c73d1;
	--section-bg: #ede9e9;
	--overlay: #0000001a;
	--button-bg: #fff;
	--button-fg: #000;
	--button-selected-bg: #001c4c;
	--button-selected-fg: #fff;
	--accent: gold;
	--fg-lv: #001c4c;
	--fill: #000;
	--arrow-fill: #fff;
	--menu: #fff;
	--sections-bg: #fff;
	--epi-color: #001c4c;
	--autor-color: #4b5563;
	--surface-elevated: #f3f3f3;
	--border-subtle: #cccccc;
}