/* --- light mode, blog only ---
   Loaded on /blog/ and its posts, not on the rest of the site.

   Written as an additive override sheet rather than by converting the existing
   stylesheets to custom properties. Every rule here is gated on
   :root[data-theme="light"], so with the attribute absent this file changes
   nothing at all and the dark site, which is what is live and working, cannot
   regress.

   The palette is chosen for reading rather than for contrast maxima:

   - Background is #faf9f7, a warm off-white. Pure #fff against near-black text
     is the combination people describe as glare, and on a long article it is
     the difference between finishing and not.
   - Body text is #3b3936 rather than #000. Around 11:1 on that background,
     which is well past AA and short of the harsh edge of pure black.
   - The greys step down 3b3936 -> 5c5952 -> 6b6860, so the three-level
     hierarchy the dark theme uses survives rather than flattening into one
     grey. The muted tier stops at 6b6860 because that is 5.3:1 on this ground
     and the next step lighter drops under the 4.5:1 AA floor for body text.
   - Borders are warm too. A neutral grey line on a warm ground reads as a
     mistake even when nobody can say why. */

:root[data-theme="light"] {
  color-scheme: light;
}

/* --- shared chrome from style.css --- */

/* !important because style.css sets `html, body { background: #000 !important;
   color: #fff !important }`. Specificity alone cannot beat that, and an
   important declaration is only overridden by another important one. This is
   the only place in this file that needs it. */
:root[data-theme="light"],
:root[data-theme="light"] body {
  background: #faf9f7 !important;
  color: #3b3936 !important;
}

/* style.css sets a bare `a { color: #fff }`. Any link this file does not name
   explicitly would stay white and vanish, so the catch-all comes first and the
   named rules below out-specify it. */
:root[data-theme="light"] a { color: #23221f; }

:root[data-theme="light"] nav {
  background: #faf9f7;
  border-bottom: 1px solid #e6e3dc;
}

:root[data-theme="light"] .nav-brand,
:root[data-theme="light"] .nav-brand strong { color: #23221f; }
:root[data-theme="light"] .nav-links a { color: #5c5952; }
:root[data-theme="light"] .nav-links a:hover { color: #23221f; }

:root[data-theme="light"] .section-title { color: #23221f; }
:root[data-theme="light"] .section-text { color: #5c5952; }
:root[data-theme="light"] .section-text a { color: #23221f; }

/* --- post chrome, css/post.css --- */

:root[data-theme="light"] .post-title,
:root[data-theme="light"] .post-body h2,
:root[data-theme="light"] .post-body h3,
:root[data-theme="light"] .post-body b,
:root[data-theme="light"] .post-next-title { color: #1e1d1a; }

:root[data-theme="light"] .post-standfirst,
:root[data-theme="light"] .post-lede { color: #55524b; }

:root[data-theme="light"] .post-meta,
:root[data-theme="light"] .post-next-label { color: #6b6860; }

:root[data-theme="light"] .post-back a,
:root[data-theme="light"] .backlink a { color: #55524b; }
:root[data-theme="light"] .post-back a:hover,
:root[data-theme="light"] .backlink a:hover { color: #1e1d1a; }

:root[data-theme="light"] .post-body p,
:root[data-theme="light"] .post-body ol,
:root[data-theme="light"] .post-body ul { color: #3b3936; }

:root[data-theme="light"] .post-body em { color: #46443f; }

:root[data-theme="light"] .post-body a { color: #1e1d1a; }

:root[data-theme="light"] .post-body code {
  background: #f1efe8;
  border-color: #e2dfd6;
  color: #3a3833;
}

/* Two blocks, two jobs, and they should stay distinguishable in both themes.
   .case is a walked-through scenario and carries a left rule only, no fill, the
   same as in dark. Adding a background here turned it into a grey slab that
   competed with .warn for the reader's attention.

   .warn is a box, so its border has to be set on all four sides. Setting only
   border-left-color left the other three at the dark theme's #222 against a
   cream ground: three hard edges and a fourth that looked missing. */
:root[data-theme="light"] .case { border-left-color: #cfcbbf; }

:root[data-theme="light"] .case p { color: #46443f; }

:root[data-theme="light"] .warn {
  border-color: #e3dac4;
  background: #f7f3e9;
}

:root[data-theme="light"] .warn p { color: #46443f; }

:root[data-theme="light"] .post-next a { border-color: #e2dfd6; }
:root[data-theme="light"] .post-next a:hover { border-color: #bdb9ad; }
:root[data-theme="light"] .post-next-desc { color: #5c5952; }

:root[data-theme="light"] .post-foot p {
  border-top-color: #e6e3dc;
  color: #5c5952;
}

:root[data-theme="light"] .post-foot a {
  color: #23221f;
  -webkit-text-decoration-color: #bdb9ad;
  text-decoration-color: #bdb9ad;
}

:root[data-theme="light"] .post-foot a:hover {
  -webkit-text-decoration-color: #5c5952;
  text-decoration-color: #5c5952;
}

/* --- code blocks --- */

:root[data-theme="light"] .post-body pre {
  background: #f4f2ec;
  border-color: #e2dfd6;
}

/* The inline-code rule above out-specifies post.css's `.post-body pre code`
   reset, so without repeating the reset here every block gets a second, inset
   panel drawn inside it. */
:root[data-theme="light"] .post-body pre code {
  color: #33312c;
  background: none;
  border: none;
}

:root[data-theme="light"] .code-copy {
  background: #ebe8e0;
  border-color: #d8d4c9;
  color: #5c5952;
}

:root[data-theme="light"] .code-copy:hover,
:root[data-theme="light"] .code-copy.is-done {
  color: #23221f;
  border-color: #b3aea1;
}

/* --- rail, css/rail.css --- */

:root[data-theme="light"] .rail-title { color: #6b6860; }
:root[data-theme="light"] .rail-list a { color: #6b6860; }
:root[data-theme="light"] .rail-list a:hover { color: #23221f; }

:root[data-theme="light"] .rail-list a.is-current {
  color: #1e1d1a;
  border-left-color: #bdb9ad;
}

:root[data-theme="light"] .rail-sep { border-top-color: #e6e3dc; }

/* --- blog index --- */

:root[data-theme="light"] .entry { border-color: #e2dfd6; }
:root[data-theme="light"] .entry:hover { border-color: #bdb9ad; }
:root[data-theme="light"] .entry-meta { color: #6b6860; }

:root[data-theme="light"] .group-title {
  color: #55524b;
  border-bottom-color: #e6e3dc;
}

:root[data-theme="light"] .entry.is-feature { border-color: #d8d4c9; }
:root[data-theme="light"] .entry-title { color: #1e1d1a; }
:root[data-theme="light"] .entry-blurb { color: #5c5952; }

:root[data-theme="light"] .search-box {
  background: #fff;
  border-color: #e2dfd6;
  color: #23221f;
}

:root[data-theme="light"] .search-box::-webkit-input-placeholder { color: #726e66; }
:root[data-theme="light"] .search-box::placeholder { color: #726e66; }
:root[data-theme="light"] .search-box:focus { border-color: #a8a498; }

:root[data-theme="light"] .search-hint { color: #6b6860; }
:root[data-theme="light"] .search-hint button {
  color: #55524b;
  border-bottom-color: #d8d4c9;
}
:root[data-theme="light"] .search-hint button:hover { color: #1e1d1a; }

:root[data-theme="light"] .result { border-top-color: #e6e3dc; }
:root[data-theme="light"] .result-where { color: #6b6860; }
:root[data-theme="light"] .result-title { color: #3b3936; }
:root[data-theme="light"] .result:hover .result-title { color: #1e1d1a; }
:root[data-theme="light"] .result-snip { color: #5c5952; }
:root[data-theme="light"] .result-snip mark { color: #1e1d1a; }
:root[data-theme="light"] .result-none { color: #6b6860; }

/* --- the question drill --- */

:root[data-theme="light"] .search {
  background: #fff;
  border-color: #e2dfd6;
  color: #23221f;
}

:root[data-theme="light"] .search::placeholder { color: #726e66; }
:root[data-theme="light"] .search:focus { border-color: #a8a498; }

:root[data-theme="light"] .filter {
  border-color: #e2dfd6;
  color: #5c5952;
}

:root[data-theme="light"] .filter:hover { color: #1e1d1a; border-color: #bdb9ad; }

:root[data-theme="light"] .filter.is-on {
  color: #faf9f7;
  background: #23221f;
  border-color: #23221f;
}

:root[data-theme="light"] .bar {
  color: #6b6860;
  border-bottom-color: #e6e3dc;
}

:root[data-theme="light"] .progress-track { background: #e6e3dc; }
:root[data-theme="light"] .progress-fill { background: #23221f; }

:root[data-theme="light"] .reset {
  color: #6b6860;
  -webkit-text-decoration-color: #d8d4c9;
  text-decoration-color: #d8d4c9;
}

:root[data-theme="light"] .reset:hover { color: #3b3936; }

:root[data-theme="light"] .qcard { border-bottom-color: #eae7e0; }
:root[data-theme="light"] .qcard.is-target { background: #f2f0ea; }

:root[data-theme="light"] .qhead { color: #1e1d1a; }
:root[data-theme="light"] .qhead:hover { color: #55524b; }
:root[data-theme="light"] .qhead::after { color: #726e66; }
:root[data-theme="light"] .qcat { color: #6b6860; }

:root[data-theme="light"] .qanswer { color: #46443f; }

:root[data-theme="light"] .qtests {
  color: #55524b;
  border-left-color: #ddd9ce;
}

:root[data-theme="light"] .qtests b { color: #3b3936; }

:root[data-theme="light"] .mark {
  border-color: #e2dfd6;
  color: #5c5952;
}

:root[data-theme="light"] .mark:hover { color: #1e1d1a; border-color: #bdb9ad; }

:root[data-theme="light"] .qcard[data-state="known"] .mark[data-set="known"],
:root[data-theme="light"] .qcard[data-state="review"] .mark[data-set="review"] {
  color: #1e1d1a;
  border-color: #a8a498;
  background: #eeece5;
}

/* A question marked known is dimmed so the eye skips it. On a light ground
   dimming means moving towards the background, not towards black. */
:root[data-theme="light"] .qcard[data-state="known"] .qhead { color: #96928a; }
:root[data-theme="light"] .qcard[data-state="known"] .qhead:hover { color: #5c5952; }

:root[data-theme="light"] .empty { color: #6b6860; }

:root[data-theme="light"] .stack-title,
:root[data-theme="light"] .tool-name { color: #1e1d1a; }

:root[data-theme="light"] .stack-intro,
:root[data-theme="light"] .deep-lead,
:root[data-theme="light"] .tool-what { color: #5c5952; }

:root[data-theme="light"] .tool-how { color: #46443f; }
:root[data-theme="light"] .tool { border-top-color: #eae7e0; }

:root[data-theme="light"] .reads a { color: #1e1d1a; }
:root[data-theme="light"] .reads span { color: #6b6860; }
:root[data-theme="light"] .reads li { border-bottom-color: #eae7e0; }

:root[data-theme="light"] .stack,
:root[data-theme="light"] .deep { border-top-color: #e6e3dc; }

/* --- the toggle itself, injected by js/theme.js --- */

.theme-toggle {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 8px;
  margin-left: 4px;
  border-radius: 6px;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.theme-toggle:hover { color: #fff; }
.theme-toggle svg { display: block; width: 16px; height: 16px; }

:root[data-theme="light"] .theme-toggle { color: #5c5952; }
:root[data-theme="light"] .theme-toggle:hover { color: #1e1d1a; }