/* Finance TL;DR — dark theme.
   ---------------------------------------------------------------------------
   Nothing on this site is styled by classes: the SPA's colours are inline style
   attributes compiled into the JS bundle (/assets/cb0534b7-*.js), and the blog
   and podcast pages are generated with inline hex too. So the only override
   lever is attribute-substring selectors + !important — the same trick the
   responsive layer in index.html already uses.

   Two serialisations exist and BOTH must be matched for every colour:
     • SPA markup is re-serialised by the runtime  → "color: rgb(33, 28, 22)"
     • static pages + JS-injected markup keep hex  → "color:#211c16"

   Palette: same warm editorial identity, flipped. Cream → warm near-black,
   ink → warm off-white, the deep greens lifted so they stay legible on dark;
   amber (#E8943A) is unchanged — it already reads on both.
   --------------------------------------------------------------------------- */

html[data-theme="dark"] {
  --ftd-bg: #14120E;         /* page, was #F5F0E8 */
  --ftd-surface: #1E1A15;    /* cards, was #fff */
  --ftd-surface-2: #221E17;  /* raised panels, was #FBF7EF */
  --ftd-ink: #EFE8DC;        /* headings/strong text, was #211c16 */
  --ftd-body: #B7AE9F;       /* body copy, was #544d41 / #5b5246 */
  --ftd-body-2: #C8C0B2;     /* footer links, was #3f3a31 */
  --ftd-muted: #9B9182;      /* micro-labels, was #8a8070 / #7a7060 */
  --ftd-green: #74C67A;      /* links/accents, was #2E7D32 */
  --ftd-green-hi: #A8D4A4;   /* display headings, was #1d3a1f */
  --ftd-line: rgba(255, 255, 255, .14);
  color-scheme: dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--ftd-bg) !important;
}
html[data-theme="dark"] ::selection { background: #74C67A; color: #14120E; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a342b; }

/* ── Surfaces ───────────────────────────────────────────────────────────── */

/* Page shell (the SPA root div carries the cream background + theme vars). */
html[data-theme="dark"] [style*="background: rgb(245, 240, 232)"],
html[data-theme="dark"] [style*="background:#F5F0E8"] {
  background: var(--ftd-bg) !important;
}

/* Cards, tables, blockquotes, the RSS pill — everything that was plain white. */
html[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"] {
  background: var(--ftd-surface) !important;
}

/* Raised cream panels (hero portrait frame, floating stat cards). */
html[data-theme="dark"] [style*="background: rgb(251, 247, 239)"],
html[data-theme="dark"] [style*="background:#FBF7EF"] {
  background: var(--ftd-surface-2) !important;
}
html[data-theme="dark"] [style*="background: rgba(251, 247, 239, 0.55)"] {
  background: rgba(34, 30, 23, .62) !important;
}
html[data-theme="dark"] [style*="background: rgba(251, 247, 239, 0.6)"] {
  background: rgba(34, 30, 23, .68) !important;
}
/* Avatar image backdrop. */
html[data-theme="dark"] [style*="background: rgb(239, 230, 214)"],
html[data-theme="dark"] [style*="background:#EFE6D6"] {
  background: #2A251E !important;
}
/* Hero secondary button ("Read the articles →") — frosted white over cream. */
html[data-theme="dark"] [style*="background: rgba(255, 255, 255, 0.35)"] {
  background: rgba(255, 255, 255, .07) !important;
}
/* Category chips tinted with the brand colours. */
html[data-theme="dark"] [style*="background: rgba(46, 125, 50, 0.12)"],
html[data-theme="dark"] [style*="background:#2E7D321f"] {
  background: rgba(116, 198, 122, .16) !important;
}
html[data-theme="dark"] [style*="background: rgba(232, 148, 58, 0.14)"],
html[data-theme="dark"] [style*="background:#E8943A24"] {
  background: rgba(232, 148, 58, .18) !important;
}

/* ── Text ───────────────────────────────────────────────────────────────── */
/* The :not() guards skip chips that sit ON a video thumbnail: those keep a
   near-white glass background in dark mode, so their ink text must stay dark. */

html[data-theme="dark"] [style*="color: rgb(33, 28, 22)"]:not([style*="background: rgba(255, 255, 255, 0.5)"]),
html[data-theme="dark"] [style*="color:#211c16"]:not([style*="background:rgba(255,255,255,.5)"]) {
  color: var(--ftd-ink) !important;
}
html[data-theme="dark"] [style*="color: rgb(29, 58, 31)"],
html[data-theme="dark"] [style*="color:#1d3a1f"] {
  color: var(--ftd-green-hi) !important;
}
html[data-theme="dark"] [style*="color: rgb(84, 77, 65)"],
html[data-theme="dark"] [style*="color: rgb(91, 82, 70)"],
html[data-theme="dark"] [style*="color:#544d41"],
html[data-theme="dark"] [style*="color:#5b5246"],
html[data-theme="dark"] [style*="color:#3a352c"],
html[data-theme="dark"] [style*="color:#6a6152"] {
  color: var(--ftd-body) !important;
}
html[data-theme="dark"] [style*="color: rgb(63, 58, 49)"],
html[data-theme="dark"] [style*="color:#3f3a31"] {
  color: var(--ftd-body-2) !important;
}
html[data-theme="dark"] [style*="color: rgb(138, 128, 112)"],
html[data-theme="dark"] [style*="color: rgb(122, 112, 96)"],
html[data-theme="dark"] [style*="color:#8a8070"],
html[data-theme="dark"] [style*="color:#7a7060"] {
  color: var(--ftd-muted) !important;
}
html[data-theme="dark"] [style*="color: rgb(46, 125, 50)"],
html[data-theme="dark"] [style*="color:#2E7D32"] {
  color: var(--ftd-green) !important;
}
/* Amber's darker hover/press shade goes back to full amber on dark. */
html[data-theme="dark"] [style*="color: rgb(201, 116, 42)"],
html[data-theme="dark"] [style*="color:#C9742A"] {
  color: #E8943A !important;
}

/* ── Hairlines ──────────────────────────────────────────────────────────── */

html[data-theme="dark"] [style*="solid rgba(33, 28, 22, 0.18)"],
html[data-theme="dark"] [style*="solid rgba(33, 28, 22, 0.2)"],
html[data-theme="dark"] [style*="solid rgba(33, 28, 22, 0.25)"],
html[data-theme="dark"] [style*="solid rgba(33, 28, 22, 0.3)"],
html[data-theme="dark"] [style*="solid rgba(33,28,22,.16)"],
html[data-theme="dark"] [style*="solid rgba(33,28,22,.14)"],
html[data-theme="dark"] [style*="solid #211c16"] {
  border-color: var(--ftd-line) !important;
}
html[data-theme="dark"] [style*="solid rgba(33, 28, 22, 0.1)"],
html[data-theme="dark"] [style*="solid rgba(33, 28, 22, 0.08)"],
html[data-theme="dark"] [style*="solid rgba(33,28,22,.08)"] {
  border-color: rgba(255, 255, 255, .09) !important;
}
/* Ink rule under section eyebrows + the 28px hero hairline. */
html[data-theme="dark"] [style*="background: rgb(33, 28, 22)"] {
  background: rgba(255, 255, 255, .3) !important;
}

/* ── Chrome: nav capsule + footer ───────────────────────────────────────── */
/* Structural selectors are available here, so use them instead of matching the
   glass recipe by substring. */

html[data-theme="dark"] header > div,
html[data-theme="dark"] header.site .in {
  background: rgba(22, 19, 15, .62) !important;
  border-color: rgba(255, 255, 255, .1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
              inset 0 0 0 1px rgba(255, 255, 255, .05),
              0 12px 34px -14px rgba(0, 0, 0, .6) !important;
}
html[data-theme="dark"] header.site .in .brand { color: var(--ftd-ink); }
html[data-theme="dark"] header.site nav.site a { color: var(--ftd-body); }
html[data-theme="dark"] header.site nav.site a.active { color: var(--ftd-ink); }
html[data-theme="dark"] footer.site { border-top-color: rgba(255, 255, 255, .09); }
html[data-theme="dark"] footer.site .in { color: var(--ftd-muted); }

/* ── Static article pages (class-styled, not inline) ────────────────────── */

html[data-theme="dark"] body { color: var(--ftd-ink); }
html[data-theme="dark"] article h2,
html[data-theme="dark"] article h3 { color: var(--ftd-green-hi); }
html[data-theme="dark"] article p,
html[data-theme="dark"] article ul,
html[data-theme="dark"] article ol,
html[data-theme="dark"] article td { color: var(--ftd-body); }
html[data-theme="dark"] article strong { color: var(--ftd-ink); }
html[data-theme="dark"] article a { color: var(--ftd-green); }
html[data-theme="dark"] article th { color: var(--ftd-muted); }
html[data-theme="dark"] article table { background: var(--ftd-surface); border-color: var(--ftd-line); }
html[data-theme="dark"] article th,
html[data-theme="dark"] article td { border-bottom-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] article blockquote { background: var(--ftd-surface); color: var(--ftd-body); }
html[data-theme="dark"] a { color: var(--ftd-green); }

/* Decorative background marks (grid, rings) read too strong against
   near-black — the light theme's 4-7% alpha is tuned for cream. */
html[data-theme="dark"] [aria-hidden="true"][style*="position: fixed"] { opacity: .35 !important; }

/* ── The toggle itself (both themes) ────────────────────────────────────── */

.ftd-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(33, 28, 22, .22);
  border-radius: 100px;
  background: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  color: #211c16;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s, border-color .18s;
}
.ftd-theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 22px -12px rgba(33, 28, 22, .5);
}
.ftd-theme-toggle:focus-visible { outline: 2px solid #E8943A; outline-offset: 2px; }
.ftd-theme-toggle svg { display: block; width: 18px; height: 18px; }
/* Sun in light mode, moon in dark — only one is ever rendered. */
.ftd-theme-toggle .ftd-icon-moon { display: none; }
html[data-theme="dark"] .ftd-theme-toggle .ftd-icon-moon { display: block; }
html[data-theme="dark"] .ftd-theme-toggle .ftd-icon-sun { display: none; }
html[data-theme="dark"] .ftd-theme-toggle {
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #EFE8DC !important;
}
html[data-theme="dark"] .ftd-theme-toggle:hover {
  background: rgba(255, 255, 255, .14) !important;
}