/* ROININJA blog: optional light reading theme + theme toggle.
   Dark (article.css) is the brand default and is left untouched: every light rule below is
   scoped under html[data-theme="light"]. The attribute is set before first paint by the inline
   <head> snippet (saved choice in localStorage "rn-theme" -> OS prefers-color-scheme -> dark)
   and kept in sync by theme.js.
   Load order matters: this file comes AFTER article.css AND after the page's inline <style>,
   so equal-specificity rules here win too. Ship it only together with the nav toggle button
   (apply_theme.py inserts the head snippet, this file, theme.js and the button as one unit). */

/* ---------- Toggle button (both themes) ---------- */
.theme-toggle {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  margin-left: auto; margin-right: 10px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: transparent; color: var(--dim);
  font: inherit; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--mute); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { display: block; width: 18px; height: 18px; }
.theme-toggle .i-moon { display: none; }
html[data-theme="light"] .theme-toggle .i-sun { display: none; }
html[data-theme="light"] .theme-toggle .i-moon { display: block; }
/* No JS = no data-theme = nothing to switch: hide the dead button, keep the original nav. */
html:not([data-theme]) .theme-toggle { display: none; }
/* nav.top .container is justify-content: space-between. The toggle's auto margin keeps it next
   to the CTA; nav-mid gets the other auto margin, and the -46px (36px button + 10px gap) makes it
   land exactly where it sat before the toggle existed. */
html[data-theme] nav.top .nav-mid { margin-left: auto; margin-right: -46px; }
/* Small phones: keep brand + toggle + CTA on one line (320px leaves 272px inside the 24px gutters). */
@media (max-width: 360px) {
  .theme-toggle { width: 34px; height: 34px; margin-right: 8px; }
}
@media (max-width: 340px) {
  .theme-toggle { width: 30px; height: 30px; margin-right: 6px; }
  html[data-theme] .theme-toggle + .nav-cta { padding-left: 14px; padding-right: 14px; }
}

/* ---------- Light tokens ---------- */
html[data-theme="light"] {
  --bg: #fbfaf7;                    /* warm off-white page */
  --bg-soft: #f2f1ea;               /* formula / code blocks */
  --surface: #f4f3ee;
  --surface-2: #ecebe4;
  --line: rgba(18,18,16,0.09);
  --line-2: rgba(18,18,16,0.16);
  --text: #121210;                  /* headings, strong, table cells   17.97:1 on --bg */
  --dim: #5a5a54;                   /* deck, meta, th, nav links        6.65:1 */
  --mute: #6b6b64;                  /* separators, legal, read time     5.14:1 */
  --accent: #4d6b00;                /* lime as INK: text, bullets, logo "ROI", meaningful borders  5.89:1 */
  --accent-fill: #d4ff3d;           /* lime as FILL behind dark text (button, selection, tints) */
  --body: #2b2b28;                  /* paragraph text                  13.60:1 */
  --body-2: #3b3b37;                /* list items                      10.78:1 */
  --callout-bg: #f4f8e2;            /* pale lime tint */
  --callout-line: #d3ddae;
}
html[data-theme="light"] ::selection { background: var(--accent-fill); color: #0a0a0a; }

/* Sticky nav: translucent light backdrop; CTA turns into a dark pill (article.css: bg var(--text), color var(--bg)). */
html[data-theme="light"] nav.top { background: rgba(251,250,247,0.9); }

/* ---------- Article body ---------- */
html[data-theme="light"] .art-body { color: var(--body); }
html[data-theme="light"] .art-body ul li,
html[data-theme="light"] .art-body ol li { color: var(--body-2); }
html[data-theme="light"] .art-body p a,
html[data-theme="light"] .art-body li a { text-decoration-color: rgba(77,107,0,0.5); }
html[data-theme="light"] .art-body p a:hover,
html[data-theme="light"] .art-body li a:hover { text-decoration-color: var(--accent); }
/* Source lines (best-forex-marketing-agencies): dim links with a currentColor underline, as in dark. */
html[data-theme="light"] .art-body .art-src a { text-decoration-color: currentColor; }
html[data-theme="light"] .art-body .art-src a:hover { color: var(--accent); }
html[data-theme="light"] .art-body .table-scroll:focus-visible { outline-color: var(--accent); }
html[data-theme="light"] .art-body .callout { background: var(--callout-bg); border-color: var(--callout-line); }
html[data-theme="light"] .art-body .callout p { color: var(--body); }
html[data-theme="light"] .btn-primary {
  background: var(--accent-fill); color: #0a0a0a;
  box-shadow: inset 0 0 0 1px rgba(77,107,0,0.28);
}
html[data-theme="light"] .related-card:hover { background: rgba(18,18,16,0.025); }

/* ---------- Byline + share row (rules from each page's inline <style>) ---------- */
html[data-theme="light"] .byline-link { border-bottom-color: rgba(18,18,16,0.22); }
html[data-theme="light"] .byline-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
html[data-theme="light"] .art-byline .byline-prefix { color: var(--dim); }
html[data-theme="light"] .art-share { border-top-color: var(--line); border-bottom-color: var(--line); }
html[data-theme="light"] .art-share .share-label { color: var(--mute); }
html[data-theme="light"] .share-btn {
  background: rgba(18,18,16,0.03); border-color: rgba(18,18,16,0.12); color: var(--text);
}
html[data-theme="light"] .share-btn:hover,
html[data-theme="light"] .share-copy.copied {
  border-color: var(--accent); color: var(--accent); background: rgba(212,255,61,0.2);
}