/* =========================================================================
   theme.css — self-contained LIGHT/DARK theming for the whole course site.
   Zero dependencies, offline. Dark is the DEFAULT (each page's own :root is
   already the dark palette). This file ONLY adds a LIGHT override plus the
   toggle-button style. It edits nothing — everything wins purely by
   specificity via the html[data-theme="..."] attribute.
   ========================================================================= */

/* ---- DARK (explicit, matches each page's inline :root defaults) -----------
   Not strictly required (pages are dark by default) but stated explicitly so
   the theme system is self-describing and future pages inherit it too.       */
html[data-theme="dark"]{
  --bg:#14122C; --bg-2:#1D1A42; --panel:#241F50; --panel-2:#2F2A62;
  --paper:#FCFAF4; --ink:#1B1934; --ink-soft:#514E72;
  --lime:#9BE15D; --teal:#22D3B0; --teal-deep:#0E8E78; --blue:#5B8DEF;
  --amber:#F6B73C; --coral:#FF6B6B; --purple:#A06BFF;
  --muted:#9694C0; --line:rgba(255,255,255,.10);
  --shadow:0 16px 44px -18px rgba(0,0,0,.65); --r:18px;
}

/* =========================================================================
   LIGHT THEME
   Clean, accessible light palette. Accent HUES preserved but deepened so
   they keep WCAG-AA contrast when used as text on light surfaces.
   ========================================================================= */
html[data-theme="light"]{
  /* surfaces */
  --bg:#F4F2FA;        /* page background — soft lavender white              */
  --bg-2:#ECE9F6;      /* recessed surface (notes, pills, inputs)            */
  --panel:#FFFFFF;     /* cards                                              */
  --panel-2:#F1EEF9;   /* alternate panel / node chips                       */
  --paper:#FFFFFF;     /* light "paper" stays light                          */

  /* text (dark on light — AA+) */
  --ink:#1B1934;       /* primary text  ~15:1 on --bg                        */
  --ink-soft:#403D63;  /* secondary text ~8.5:1 on --bg                      */
  --muted:#63608A;     /* muted labels  ~4.9:1 on --bg                       */

  /* accents — deepened for contrast on light while keeping the hue */
  --lime:#3F8F1F;      /* green  (was #9BE15D)                               */
  --teal:#0E9E82;      /* teal   (was #22D3B0)                               */
  --teal-deep:#0B6F5E; /* deep teal                                          */
  --blue:#3665CE;      /* blue   (was #5B8DEF)                               */
  --amber:#B4790A;     /* amber  (was #F6B73C)                               */
  --coral:#D83F3F;     /* coral  (was #FF6B6B)                               */
  --purple:#7A45E0;    /* purple (was #A06BFF)                               */

  /* structure */
  --line:rgba(23,20,64,.12);
  --shadow:0 16px 40px -20px rgba(60,50,120,.28);
}

/* ---- base text: body color is hardcoded near-white on every page --------- */
html[data-theme="light"] body{ color:var(--ink); }
html[data-theme="light"] footer b,
html[data-theme="light"] .prog .p b{ color:var(--ink); }

/* ---- sticky header + course-nav have hardcoded dark backgrounds ---------- */
html[data-theme="light"] header.bar{
  background:rgba(248,246,253,.86); border-bottom-color:var(--line);
}
html[data-theme="light"] .cn{
  background:rgba(248,246,253,.94); border-bottom-color:var(--line);
}
html[data-theme="light"] .cn a{ color:var(--ink-soft); }
html[data-theme="light"] .cn a:hover{ background:rgba(23,20,64,.06); color:var(--ink); }
html[data-theme="light"] .cn a .cn-he{ color:var(--muted); }
/* .cn a.cn-active keeps its teal→blue gradient pill + dark text — fine on light */

/* ---- content text blocks (hardcoded light-lavender on dark panels) -------
   These sit on surfaces driven by --panel/--bg-2 (now light) so their text
   must flip dark. Terminal/code "screens" with hardcoded dark backgrounds
   (.terminal, .plat-box, .he-pane.code) are intentionally left untouched.   */
html[data-theme="light"] .hero p.lead,
html[data-theme="light"] .inside,
html[data-theme="light"] .note li,
html[data-theme="light"] .card .def,
html[data-theme="light"] .career p,
html[data-theme="light"] .hat p,
html[data-theme="light"] .hat.grey b,
html[data-theme="light"] .mission,
html[data-theme="light"] .bridge,
html[data-theme="light"] .port-desc,
html[data-theme="light"] .lesson .say,
html[data-theme="light"] .dt-panel,
html[data-theme="light"] .net-row .u{ color:var(--ink-soft); }

/* node chips: .fnode declares a dark then a light color; the light wins on
   its light --panel-2 chip, so flip it — but keep .ready (gradient) as-is.   */
html[data-theme="light"] .fnode:not(.ready){ color:var(--ink-soft); }

/* ---- ghost buttons / text inputs (bg becomes light) ---------------------- */
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .btn.ghost,
html[data-theme="light"] .cats button,
html[data-theme="light"] .presets button,
html[data-theme="light"] .q-btns button,
html[data-theme="light"] .langbtn,
html[data-theme="light"] .search input,
html[data-theme="light"] .nameform input,
html[data-theme="light"] .term-in input{ color:var(--ink); }

/* ---- accent-tinted callout boxes: text was pale, deepen for the tint ----- */
html[data-theme="light"] .analogy{ color:#8A5A06; }          /* on amber tint */
html[data-theme="light"] .warn-box,
html[data-theme="light"] .q-fb.bad{ color:#B02A22; }         /* on red tint   */
html[data-theme="light"] .q-fb.good{ color:#0C7350; }        /* on green tint */
html[data-theme="light"] .gate .law{ color:#9A2626; }
html[data-theme="light"] .gate li b{ color:#B02A22; }

/* ---- semantic inline tags that lose contrast on now-light panels --------- */
html[data-theme="light"] .cookie-row .k,
html[data-theme="light"] .dt-panel .tag{ color:var(--blue); }
html[data-theme="light"] .cookie-row .v,
html[data-theme="light"] .dt-panel .txt,
html[data-theme="light"] .dt-panel .ok,
html[data-theme="light"] .net-row .m,
html[data-theme="light"] .net-row .s{ color:var(--teal-deep); }
html[data-theme="light"] .dt-panel .warn{ color:var(--amber); }

/* =========================================================================
   THEME TOGGLE BUTTON  (injected by theme.js into .cn .cn-in)
   ========================================================================= */
.dd-theme-toggle{
  margin-inline-start:auto;              /* push to the trailing edge of nav  */
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0;
  font-size:1rem; line-height:1; cursor:pointer;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:inherit;
  transition:transform .15s, background .15s, border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
.dd-theme-toggle:hover{ transform:translateY(-1px); border-color:var(--teal); }
.dd-theme-toggle:active{ transform:translateY(0); }
.dd-theme-toggle:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

/* fixed-corner fallback when no .cn-in nav exists on a page */
.dd-theme-toggle.dd-fixed{
  position:fixed; top:12px; inset-inline-end:12px; z-index:60;
  margin:0;
  box-shadow:var(--shadow);
  background:var(--panel);
}