/* ─────────────────────────────────────────────────────────────────────────────
   themes.css — TheWhiteCode theme system.
   Four user preferences: dark (default), light, soft (easy on the eyes) and
   system (follow the OS color scheme). An inline head script in base.html
   resolves the preference to a concrete theme and sets <html data-theme>
   BEFORE first paint, so there is never a flash of the wrong theme.

   All colors flow through the --tw-* tokens defined here. style.css keeps
   working against the legacy --global-* variables, which are re-mapped to
   the tokens per theme. New components should consume the --tw-* tokens
   directly (see form-modern.css).
   ──────────────────────────────────────────────────────────────────────────── */

/* ── dark (the historical look — default when no preference is stored) ── */
:root,
:root[data-theme="dark"] {
  --tw-bg: #000000;
  --tw-bg-2: #0a0d12;
  --tw-surface: #12161d;
  --tw-surface-2: #181e27;
  --tw-header: #000000;
  --tw-text: #ffffff;
  --tw-muted: #9aa3b2;
  --tw-border: rgba(255, 255, 255, 0.09);
  --tw-border-strong: rgba(255, 255, 255, 0.18);
  --tw-link: #3ff823;
  --tw-accent: #22a06b;
  --tw-accent-hover: #198754;
  --tw-ring: rgba(34, 160, 107, 0.22);
  --tw-shadow: rgba(255, 255, 255, 0.1);
  --tw-heading: #22af0c;

  /* El Manual book card: the card background, its inner frame stroke,
     the card text and the tagline. dark keeps the original look the
     artwork was designed on (near-black card, white text, bright green). */
  --tw-book-bg: #231f20;
  --tw-book-frame: #39b54a;
  --tw-book-text: #ffffff;
  --tw-book-tagline: #7ed957;

  /* legacy variable remap (style.css consumes these) */
  --global-background: var(--tw-bg);
  --global-background-black: var(--tw-bg);
  --global-background-white: var(--tw-text);
  --global-color-white: var(--tw-text);
  --global-color-text-collapse: var(--tw-muted);
  --global-color-footer-links: var(--tw-muted);
  --global-color-sidebar-title: var(--tw-text);
  --global-box-shadow-color: var(--tw-shadow);
  --global-text-navbar-color: var(--tw-text);
  --global-text-navbar-scrolled-color: var(--tw-text);
  --global-background-green: #22af0c;
  --global-background-green-dark: #0d4d03;
}

/* ── light ─────────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --tw-bg: #f4f6f8;
  --tw-bg-2: #eceff3;
  --tw-surface: #ffffff;
  --tw-surface-2: #eef1f5;
  --tw-header: #ffffff;
  --tw-text: #181c22;
  --tw-muted: #5c6675;
  --tw-border: rgba(16, 24, 40, 0.12);
  --tw-border-strong: rgba(16, 24, 40, 0.22);
  --tw-link: #157347;
  --tw-accent: #198754;
  --tw-accent-hover: #157347;
  --tw-ring: rgba(25, 135, 84, 0.25);
  --tw-shadow: rgba(16, 24, 40, 0.12);
  --tw-heading: #157347;

  /* El Manual book card: LIGHT background — the user rejected the dark
     "pine" version ("este fondo negro no debe ser así, estamos en light"):
     a light green tint that plays with the theme's accent, dark card text,
     and the theme's strong green for the tagline. */
  --tw-book-bg: #e9f1e9;
  --tw-book-frame: #2f8f5b;
  --tw-book-text: #181c22;
  --tw-book-tagline: #157347;

  --global-background: var(--tw-bg);
  --global-background-black: var(--tw-bg);
  --global-background-white: var(--tw-text);
  --global-color-white: var(--tw-text);
  --global-color-text-collapse: var(--tw-muted);
  --global-color-footer-links: var(--tw-muted);
  --global-color-sidebar-title: var(--tw-text);
  --global-box-shadow-color: var(--tw-shadow);
  --global-text-navbar-color: var(--tw-text);
  --global-text-navbar-scrolled-color: var(--tw-text);
  --global-background-green: #157347;
  --global-background-green-dark: #0f5132;
}

/* ── soft (warm, low-contrast — easy on the eyes) ────────────────────────
   2026-10-23: the page background IS the blog dropdown's background
   (the warm cream #fbf9f4) — cards are now white so the hierarchy is
   cream page → white card → darker input wells. */
:root[data-theme="soft"] {
  --tw-bg: #f4f0e6;
  --tw-bg-2: #ece5d6;
  --tw-surface: #fbf9f3;
  --tw-surface-2: #f0eadc;
  --tw-header: #f7f4ec;
  --tw-text: #4d4739;
  --tw-muted: #8b8272;
  --tw-border: rgba(77, 71, 57, 0.15);
  --tw-border-strong: rgba(77, 71, 57, 0.28);
  --tw-link: #4c7a5e;
  --tw-accent: #57856a;
  --tw-accent-hover: #446b53;
  --tw-ring: rgba(87, 133, 106, 0.3);
  --tw-shadow: rgba(120, 108, 84, 0.12);
  --tw-heading: #45705a;

  /* El Manual book card: LIGHT background — the user rejected the dark
     olive version: it is the theme's own warm cream (surface-2), with the
     theme's dark text and heading green for the tagline. */
  --tw-book-bg: #f0eadc;
  --tw-book-frame: #57856a;
  --tw-book-text: #4d4739;
  --tw-book-tagline: #45705a;

  --global-background: var(--tw-bg);
  --global-background-black: var(--tw-bg);
  --global-background-white: var(--tw-text);
  --global-color-white: var(--tw-text);
  --global-color-text-collapse: var(--tw-muted);
  --global-color-footer-links: var(--tw-muted);
  --global-color-sidebar-title: var(--tw-text);
  --global-box-shadow-color: var(--tw-shadow);
  --global-text-navbar-color: var(--tw-text);
  --global-text-navbar-scrolled-color: var(--tw-text);
  --global-background-green: #3c6b4a;
  --global-background-green-dark: #2e4d3c;
}

/* ── no-JS fallback: follow the OS scheme ──────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --tw-bg: #f4f6f8;
    --tw-bg-2: #eceff3;
    --tw-surface: #ffffff;
    --tw-surface-2: #eef1f5;
    --tw-header: #ffffff;
    --tw-text: #181c22;
    --tw-muted: #5c6675;
    --tw-border: rgba(16, 24, 40, 0.12);
    --tw-border-strong: rgba(16, 24, 40, 0.22);
    --tw-link: #157347;
    --tw-accent: #198754;
    --tw-accent-hover: #157347;
    --tw-ring: rgba(25, 135, 84, 0.25);
    --tw-shadow: rgba(16, 24, 40, 0.12);
    --tw-book-bg: #e9f1e9;
    --tw-book-frame: #2f8f5b;
    --tw-book-text: #181c22;
    --tw-book-tagline: #157347;
  }
}

/* ── theme-scoped component overrides ──────────────────────────────────── */
/* (style.css hard-coded dark surfaces; the tokens above re-theme what it
   consumes via --global-*, these cover the rest.) */

/* white text on green must stay white in every theme */
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-primary,
.btn-primary:hover,
.btn-danger,
.btn-danger:hover,
.pp-btn-primary,
.pp-btn-primary:hover,
.pp-file .custom-file-label::after {
  color: #fff;
}

/* light + soft: surfaces that were hard-coded dark */
:root[data-theme="light"] #header,
:root[data-theme="soft"] #header {
  background: var(--tw-header);
  border-bottom: 1px solid var(--tw-border);
}
:root[data-theme="light"] .modal-content,
:root[data-theme="soft"] .modal-content {
  background-color: var(--tw-surface);
  color: var(--tw-text);
  border: 1px solid var(--tw-border);
}
:root[data-theme="light"] .modal-header,
:root[data-theme="light"] .modal-footer,
:root[data-theme="soft"] .modal-header,
:root[data-theme="soft"] .modal-footer {
  border-color: var(--tw-border);
}
/* Bootstrap forms on light/soft: keep native white inputs readable */
:root[data-theme="light"] .form-control,
:root[data-theme="soft"] .form-control {
  color: var(--tw-text);
  background-color: var(--tw-surface);
  border-color: var(--tw-border-strong);
}
:root[data-theme="light"] .form-control:focus,
:root[data-theme="soft"] .form-control:focus {
  color: var(--tw-text);
  background-color: var(--tw-surface);
  border-color: var(--tw-accent);
  box-shadow: 0 0 0 3px var(--tw-ring);
}
/* scrollbars */
:root[data-theme="light"] body::-webkit-scrollbar,
:root[data-theme="soft"] body::-webkit-scrollbar,
:root[data-theme="light"] body::-webkit-scrollbar-track,
:root[data-theme="soft"] body::-webkit-scrollbar-track {
  background-color: var(--tw-bg-2);
}
/* select dropdown options */
:root[data-theme="light"] select option,
:root[data-theme="soft"] select option {
  background: var(--tw-surface);
  color: var(--tw-text);
}

/* Google CSE widget ships with its own dark skin — match the site theme */
:root[data-theme="light"] .blog .sidebar .gsc-control-cse,
:root[data-theme="soft"] .blog .sidebar .gsc-control-cse {
  background: var(--tw-surface);
  color: var(--tw-text);
}

/* ── theme picker (navbar) ─────────────────────────────────────────────── */
.theme-picker {
  position: relative;
  display: inline-block;
}

/* The toggle icon is inline SVG, NOT a font glyph (2026-10-23): in a
   browser whose cached icon font was missing/corrupt, the boxicons glyph
   rendered nothing and the button collapsed to an invisible sliver in
   system mode. SVG always renders; the shown icon follows the RESOLVED
   theme (moon in dark/soft, sun in light) via the data-theme attribute. */
.theme-toggle .theme-icon,
.theme-cycle .theme-icon {
  width: 22px;
  height: 22px;
  display: none;
}
.theme-toggle .theme-icon-moon,
.theme-cycle .theme-icon-moon {
  display: block;
}
:root[data-theme="light"] .theme-toggle .theme-icon-moon,
:root[data-theme="light"] .theme-cycle .theme-icon-moon {
  display: none;
}
:root[data-theme="light"] .theme-toggle .theme-icon-sun,
:root[data-theme="light"] .theme-cycle .theme-icon-sun {
  display: block;
}
.theme-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 150px;
  background: var(--tw-surface);
  border: 1px solid var(--tw-border-strong);
  border-radius: 10px;
  box-shadow: 0 10px 30px var(--tw-shadow);
  padding: 0.35rem;
  z-index: 1001;
  display: none;
}
.theme-picker.open .theme-menu {
  display: block;
}
.theme-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--tw-text);
  font-size: 0.88rem;
  cursor: pointer;
  text-align: left;
}
.theme-menu button:hover {
  background: var(--tw-surface-2);
}
.theme-menu button[aria-checked="true"] {
  color: var(--tw-accent);
  font-weight: 600;
}
.theme-menu button .check {
  margin-left: auto;
  opacity: 0;
}
.theme-menu button[aria-checked="true"] .check {
  opacity: 1;
}
.theme-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--tw-border-strong);
  flex: none;
}
.swatch-dark { background: #0a0d12; }
.swatch-light { background: #ffffff; }
.swatch-soft { background: #f4f0e6; }
.swatch-system { background: linear-gradient(90deg, #0a0d12 50%, #ffffff 50%); }