/* CodeTrain - light theme for the public pages.

   The marketing and document pages are authored dark: the base :root palette in each page's
   inline <style> is the dark one, and everything here is the override that runs when
   /app/theme.js has stamped data-theme="light" on <html>. Dark stays the default and the
   identity; this is the alternative for people who asked for one.

   Loaded as a separate file rather than pasted into six pages because it is the same block every
   time. The palette below is deliberately the same one the signed-in app already uses
   (web/app/index.html), so toggling to light and then walking from / into /app/ does not change
   colour halfway.

   Two things here are not taste and should not be "simplified":

   - `.rain` must blend with `multiply`, not `screen`. Screen is 1-(1-a)(1-b), which against a
     near-white page collapses to the page and erases the canvas entirely regardless of what
     colour it draws. rain.js carries a matching inverted colour ramp. Measured: screen on light
     peaks at contrast 3, multiply at 70, against a dark-theme baseline of 80.

   - `.btn-primary` needs light text. The dark theme puts near-black (#04181a) on bright teal;
     the light palette's teal is darker (#1f8a8a) and near-black on it fails contrast.
*/

:root[data-theme="light"] {
  --bg: #f5f8fb;
  --panel: #ffffff;
  --panel-2: #eef2f7;
  --line: #d5dee7;
  --ink: #1b2431;
  --muted: #586675;
  --mint: #1f8a8a;
  --amber: #b04a2f;
  --red: #c0392b;
}

/* Chrome: nav and the beta bar are translucent over the page, so they need the light backdrop. */
:root[data-theme="light"] nav { background: rgba(245, 248, 251, .82); }
:root[data-theme="light"] .beta-bar { background: var(--panel-2); }

/* Surfaces. All of these are authored as a dark gradient; flat white reads better on light than
   a washed-out gradient does, and keeps the borders doing the structural work. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .tier,
:root[data-theme="light"] details,
:root[data-theme="light"] .rstop,
:root[data-theme="light"] .ex-card,
:root[data-theme="light"] .demo-shell,
:root[data-theme="light"] .hl {
  background: var(--panel);
  border-color: var(--line);
}
:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .tier:hover,
:root[data-theme="light"] .ex-card:hover { border-color: rgba(31, 138, 138, .45); }
:root[data-theme="light"] .tier.feat { border-color: var(--mint); }

/* Body copy. The dark theme uses a light grey (#cdd5e0) for long prose; on white that is close
   to invisible, so these fall back to the ink token. */
:root[data-theme="light"] p,
:root[data-theme="light"] li,
:root[data-theme="light"] #try .prose,
:root[data-theme="light"] .ex-q,
:root[data-theme="light"] .demo-done p { color: #33404f; }

/* Code surfaces stay dark-on-light rather than inverting: a code block that matches the page
   loses the thing that makes it read as code. */
:root[data-theme="light"] .demo-editor,
:root[data-theme="light"] .demo-static,
:root[data-theme="light"] .demo-out,
:root[data-theme="light"] .demo-out pre {
  background: #0f141b;
  color: #e8ecf2;
  border-color: #22303f;
}
:root[data-theme="light"] code,
:root[data-theme="light"] .aside-b code,
:root[data-theme="light"] #try .prose code,
:root[data-theme="light"] .ex-q code {
  background: var(--panel-2);
  border-color: var(--line);
  color: #14303a;
}

/* Buttons. See the header note: near-black on the light palette's darker teal fails contrast. */
:root[data-theme="light"] .btn-primary { color: #ffffff; }
:root[data-theme="light"] .btn-accent { color: #ffffff; }
:root[data-theme="light"] .btn-ghost { background: var(--panel); color: var(--ink); }

/* The canvas. Not a preference: see the header note. */
:root[data-theme="light"] .rain { mix-blend-mode: multiply; opacity: .85; }

/* The footer stays dark in light mode, on purpose.

   Every directory badge in it is the vendor's `-dark` variant, chosen to sit on a dark page. On a
   light footer they become a row of dark rectangles with their own backgrounds showing, which
   looks broken rather than styled. The alternatives were swapping fifteen badges for light twins
   that not every vendor publishes, or re-checking each one after any palette change forever.

   A dark footer band under a light page is a normal, deliberate pattern, and it means the badges
   keep working untouched no matter what the rest of the page does. Keep this rule if the palette
   changes again. */
:root[data-theme="light"] footer {
  background: #0a0c10;
  color: #98a3b3;
  border-top-color: #222a35;
}
:root[data-theme="light"] footer a { color: #98a3b3; }
:root[data-theme="light"] footer a:hover { color: #e8ecf2; }
:root[data-theme="light"] footer .badges { border-top-color: #222a35; }
:root[data-theme="light"] footer .ih { color: inherit; border-bottom-color: rgba(57,170,170,.45); }

/* The theme control itself, shared by every public page. */
.themebtn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  padding: 5px 9px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .16s, color .16s;
}
.themebtn:hover { border-color: var(--mint); color: var(--ink); }
.themebtn:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
