/* 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: #242626;
  --bg: #ffffff;
  --page-bg: #e7e7ed;
  --container-bg: #fff;
  --container-bg-active: #f8f8f8;
  --day-bg: #ffffff;
  --arrow-bg: #00000099;
  --day: #eaede2;
  --day-read-fg: gold;
  --fg: #222222;
  --bg-alt: #f5f5f5;
  --border-alt: #242626;
  --border: #ccc;
  --highlight: #242626;
  --link: #cf0013;
  --section-bg: #ede9e9;
  --overlay: #0000001a;
  --button-bg: #fff;
  --button-fg: #000;
  --button-selected-bg: #242626;
  --button-selected-fg: #fff;
  --accent: gold;
  --fg-lv: #242626;
  --fill: #000;
  --arrow-fill: #fff;
  --menu: #fff;
  --sections-bg: #fff;
  --epi-color: #242626;
  --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.81;
}

/* 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: #eaede2;
  --day-read-fg: gold;
  --fg: #222222;
  --bg-alt: #f5f5f5;
  --border-alt: #242626;
  --border: #ccc;
  --highlight: #242626;
  --link: #cf0013;
  --section-bg: #ede9e9;
  --overlay: #0000001a;
  --button-bg: #fff;
  --button-fg: #000;
  --button-selected-bg: #242626;
  --button-selected-fg: #fff;
  --accent: gold;
  --fg-lv: #242626;
  --fill: #000;
  --arrow-fill: #fff;
  --menu: #fff;
  --sections-bg: #fff;
  --epi-color: #242626;
  --autor-color: #4b5563;
  --surface-elevated: #f3f3f3;
  --border-subtle: #cccccc;
}