/* Dark mode for weiwei-site — comprehensive overrides */

/* Toggle button */
.dark-mode-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line2);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 100;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  color: var(--soft);
}

.dark-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border-color: var(--accent);
  color: var(--accent);
}

/* Dark mode variable overrides — target all containers */
.ww.dark,
body.dark,
html.dark {
  --ink: #f4f1ea;
  --ink2: #e8e4db;
  --cream: #1a1d24;
  --paper: #22252d;
  --line: #2e323b;
  --line2: #3a3f4a;
  --soft: #c8c3b8;
  --gray: #9e9890;
  --muted: #857f77;
  --accent: #e3a37e;
  --accent-d: #d4915e;
  /* Keep subject colors consistent */
  --math: #5b9bd5;
  --chip: #2a2d35;
  --chip-line: #3a3f4a;
  --eng: #d4915e;
  --fin: #5bb88a;
  background: #1a1d24 !important;
  color: #f4f1ea !important;
}
body.dark,
html.dark {
  background: var(--cream, #1a1d24) !important;
  color: var(--ink, #f4f1ea) !important;
}

body.dark {
  --ink: #f4f1ea;
  --ink2: #e8e4db;
  --cream: #1a1d24;
  --paper: #22252d;
  --line: #2e323b;
  --line2: #3a3f4a;
  --soft: #c8c3b8;
  --gray: #9e9890;
  --muted: #857f77;
  --accent: #e3a37e;
  --accent-d: #d4915e;
  --math: #5b9bd5;
  --chip: #2a2d35;
  --chip-line: #3a3f4a;
  --eng: #d4915e;
  --fin: #5bb88a;
}

/* Dark mode for static pages that define vars on body */
body.dark {
  background: var(--cream);
  color: var(--ink);
}

/* Nav dark mode */
.ww.dark .ww-nav,
body.dark .nav {
  background: rgba(26,29,36,0.92);
  border-color: var(--line);
}

.ww.dark .ww-navlinks,
body.dark .navlinks {
  color: var(--soft);
}

.ww.dark .ww-navlinks a:hover,
body.dark .navlinks a:hover {
  color: var(--accent);
}

.ww.dark .ww-iconbtn,
body.dark .nav-toggle {
  background: var(--paper);
  border-color: var(--line2);
  color: var(--soft);
}

.ww.dark .ww-iconbtn:hover,
body.dark .nav-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Hero dark mode */
.ww.dark .ww-hero.light,
body.dark .hero {
  background: var(--cream);
  color: var(--ink);
}

.ww.dark .ww-hero.dark,
body.dark .hero {
  background: linear-gradient(120deg, #12151b 0%, #1a1d24 55%, #1e2229 100%);
  color: var(--ink);
}

.ww.dark .ww-lead,
body.dark .lead {
  color: var(--gray);
}

.ww.dark .ww-kicker,
body.dark .eyebrow {
  color: var(--accent);
}

/* Cards dark mode */
.ww.dark .ww-pillcard,
.ww.dark .ww-tlcard,
.ww.dark .ww-nlcard,
.ww.dark .ww-freebiein,
body.dark .card,
body.dark .filterbar {
  background: var(--paper);
  border-color: var(--line);
}

.ww.dark .ww-pillcard:hover,
.ww.dark .ww-tlcard:hover,
body.dark .card:hover {
  border-color: var(--eng);
  box-shadow: 0 24px 48px -28px rgba(0,0,0,0.6);
}

/* Filter bar dark mode */
body.dark .filterbar {
  background: rgba(26,29,36,0.92);
  border-color: var(--line);
}

body.dark .chip {
  color: var(--soft);
  background: var(--paper);
  border-color: var(--line2);
}

body.dark .chip.on {
  background: var(--eng);
  color: #fff;
  border-color: var(--eng);
}

body.dark .chip:hover:not(.on) {
  border-color: var(--eng);
}

/* Segmented control dark mode */
body.dark .seg {
  background: var(--paper);
  border-color: var(--line2);
}

body.dark .seg button {
  color: var(--gray);
}

body.dark .seg button.on {
  background: var(--eng);
  color: #fff;
}

/* Search input dark mode */
body.dark .srch {
  background: var(--paper);
  border-color: var(--line2);
  color: var(--gray);
}

body.dark .srch input {
  color: var(--ink);
}

body.dark .srch input::placeholder {
  color: var(--muted);
}

/* Dropdown dark mode */
.ww.dark .ww-ddinner {
  background: var(--paper);
  border-color: var(--line);
}

.ww.dark .ww-ddinner a:hover {
  background: var(--cream);
}

.ww.dark .ww-ddinner a b {
  color: var(--ink);
}

.ww.dark .ww-ddinner a span {
  color: var(--gray);
}

/* About page dark mode */
.ww.dark .ww-abp-story p {
  color: var(--soft);
}

.ww.dark .ww-acreds span {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
}

/* Footer dark mode */
.ww.dark .ww-foot,
body.dark .footer {
  border-color: var(--line);
}

.ww.dark .ww-foot a,
body.dark .footer a {
  color: var(--soft);
}

.ww.dark .ww-foot a:hover,
body.dark .footer a:hover {
  color: var(--accent);
}

/* Newsletter dark mode */
.ww.dark .ww-nlcard {
  background: var(--paper);
  border-color: var(--line);
}

/* Button dark mode */
.ww.dark .ww-btn {
  background: var(--accent);
  color: #fff;
}

.ww.dark .ww-btn:hover {
  background: var(--accent-d);
}

.ww.dark .ww-btn.ghost {
  border-color: rgba(255,255,255,0.34);
  color: var(--ink);
}

.ww.dark .ww-btn.ghost:hover {
  background: rgba(255,255,255,0.07);
}

/* CTA button dark mode */
.ww.dark .ww-navcta,
body.dark .navcta {
  background: var(--accent);
  color: #fff;
}

.ww.dark .ww-navcta:hover,
body.dark .navcta:hover {
  background: var(--accent-d);
}

/* Creds dark mode */
.ww.dark .ww-creds {
  background: var(--paper);
}

.ww.dark .ww-cred svg {
  color: var(--accent);
}

/* Reading enhancements dark mode */
.ww.dark .reading-progress-bar,
body.dark .reading-progress-bar {
  background: linear-gradient(90deg, var(--accent), var(--eng));
}

.ww.dark .back-to-top,
body.dark .back-to-top {
  background: var(--accent);
  color: #fff;
}

/* Article enhancements dark mode */
.ww.dark .article-toc,
body.dark .article-toc {
  background: var(--paper);
  border-color: var(--line);
}

.ww.dark .toc-list a,
body.dark .toc-list a {
  color: var(--muted);
}

.ww.dark .toc-list a:hover,
.ww.dark .toc-list a.active,
body.dark .toc-list a:hover,
body.dark .toc-list a.active {
  color: var(--accent);
}

.ww.dark .copy-code-btn,
body.dark .copy-code-btn {
  background: var(--paper);
  border-color: var(--line);
  color: var(--soft);
}

.ww.dark .copy-code-btn:hover,
body.dark .copy-code-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* Blockquote dark mode */
.ww.dark blockquote,
body.dark blockquote {
  border-color: var(--accent);
  background: var(--paper);
}

/* Code dark mode */
.ww.dark code,
body.dark code {
  background: var(--paper);
}

.ww.dark pre,
body.dark pre {
  background: var(--paper);
}

/* Modal dark mode */
body.dark .modal-content {
  background: var(--paper);
}

/* Image zoom dark mode */
.ww.dark .image-zoom-overlay,
body.dark .image-zoom-overlay {
  background: rgba(0,0,0,0.95);
}

/* Social share dark mode */
.ww.dark .share-menu,
body.dark .share-menu {
  background: var(--paper);
  border-color: var(--line);
}

.ww.dark .share-option,
body.dark .share-option {
  color: var(--ink);
}

.ww.dark .share-option:hover,
body.dark .share-option:hover {
  background: var(--cream);
}

/* ── Search page dark mode ──────────────────────────────────────────── */

/* Hero */
.ww.dark .ww-cphero {
  background: var(--cream);
  color: var(--ink);
}

.ww.dark .ww-cphero .ww-bc a,
.ww.dark .ww-cphero .ww-bc .sep,
.ww.dark .ww-cphero .ww-bc span {
  color: var(--soft);
}

.ww.dark .ww-cpeyebrow {
  color: var(--accent);
}

.ww.dark .ww-cph1 {
  color: var(--ink);
}

.ww.dark .ww-cplead {
  color: var(--gray);
}

/* Filter bar */
.ww.dark .ww-filter {
  background: rgba(26, 29, 36, 0.92);
  border-color: var(--line);
}

.ww.dark .ww-flabel {
  color: var(--soft);
}

/* Search input */
.ww.dark .ww-srch {
  background: var(--paper);
  border-color: var(--line2);
  color: var(--gray);
}

.ww.dark .ww-srch input {
  color: var(--ink);
}

.ww.dark .ww-srch input::placeholder {
  color: var(--muted);
}

/* Segmented control */
.ww.dark .ww-seg {
  background: var(--paper);
  border-color: var(--line2);
}

.ww.dark .ww-seg button {
  color: var(--gray);
}

.ww.dark .ww-seg button.on {
  background: var(--sc);
  color: #fff;
}

/* No-results prompt */
.ww.dark .ww-noresult {
  color: var(--soft);
}

.ww.dark .ww-noresult b {
  color: var(--ink);
}

/* Suggestion chips */
.ww.dark .ww-chip {
  color: var(--soft);
  background: var(--paper);
  border-color: var(--line2);
}

.ww.dark .ww-chip:hover {
  border-color: var(--sc);
  color: var(--ink);
}

/* Result groups */
.ww.dark .ww-grp {
  background: var(--paper);
  border-color: var(--line);
}

.ww.dark .ww-grphead .gt {
  color: var(--ink);
}

.ww.dark .ww-grphead .gc {
  color: var(--gray);
}

/* Individual article rows */
.ww.dark .ww-art {
  border-color: var(--line);
}

.ww.dark .ww-art:hover {
  background: color-mix(in srgb, var(--sc) 8%, transparent);
}

.ww.dark .ww-art .atitle {
  color: var(--ink);
}

.ww.dark .ww-art:hover .atitle {
  color: var(--sc);
}

.ww.dark .ww-art .atag {
  color: var(--soft);
}

.ww.dark .ww-art .agrade {
  color: var(--gray);
}

.ww.dark .ww-art .adiff {
  color: var(--soft);
}

.ww.dark .ww-art .amin {
  color: var(--muted);
}

.ww.dark .ww-art .axam {
  color: var(--soft);
  background: var(--paper);
  border-color: var(--line2);
}

/* Highlight mark in search results */
.ww.dark .ww-art mark {
  background: color-mix(in srgb, var(--accent) 25%, transparent) !important;
}

/* ── Section-specific dark mode overrides ──────────────────────────── */

/* Timeline section - has hard-coded #f3ede2 in gradient */
.ww.dark .ww-tl {
  background: linear-gradient(180deg, var(--cream), #1a1d24) !important;
}

.ww.dark .ww-tlcard {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

.ww.dark .ww-tltabs {
  background: var(--paper) !important;
  border-color: var(--line2) !important;
}

.ww.dark .ww-tltab {
  color: var(--gray) !important;
}

.ww.dark .ww-tltab.on {
  background: var(--tlc) !important;
  color: #fff !important;
}

.ww.dark .ww-tlrail .line {
  background: var(--line2) !important;
}

/* Learning strategy section */
.ww.dark .ww-learn {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.ww.dark .ww-learn .ww-eyebrow {
  color: var(--accent) !important;
}

.ww.dark .ww-learn h3 {
  color: var(--ink) !important;
}

.ww.dark .ww-learn p {
  color: var(--soft) !important;
}

.ww.dark .ww-learnchips span {
  color: var(--soft) !important;
  border-color: var(--line2) !important;
  background: rgba(255,255,255,.04) !important;
}

.ww.dark .ww-learncta {
  color: var(--accent) !important;
}

/* Freebie / Resources section */
.ww.dark .ww-freebie {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.ww.dark .ww-freebie h3 {
  color: var(--ink) !important;
}

.ww.dark .ww-freebie p {
  color: var(--soft) !important;
}

.ww.dark .ww-fitem b {
  color: var(--ink) !important;
}

.ww.dark .ww-fitem span {
  color: var(--gray) !important;
}

.ww.dark .ww-finput {
  background: var(--cream) !important;
  border-color: var(--line2) !important;
  color: var(--ink) !important;
}

.ww.dark .ww-fsubmit {
  background: var(--ink) !important;
  color: #fff !important;
}

/* Newsletter section */
.ww.dark .ww-nl {
  background: var(--cream) !important;
}

.ww.dark .ww-nlcard {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

.ww.dark .ww-nlin h3 {
  color: var(--ink) !important;
}

.ww.dark .ww-nlin p {
  color: var(--soft) !important;
}

.ww.dark .ww-nlrow input {
  background: var(--cream) !important;
  border-color: var(--line2) !important;
  color: var(--ink) !important;
}

.ww.dark .ww-nlrow button {
  background: var(--ink) !important;
  color: #fff !important;
}

/* Footer section */
.ww.dark .ww-foot {
  background: var(--paper) !important;
  color: var(--soft) !important;
}

.ww.dark .ww-foot h4 {
  color: var(--ink) !important;
}

.ww.dark .ww-foot p {
  color: var(--soft) !important;
}

.ww.dark .ww-foot a {
  color: var(--soft) !important;
}

.ww.dark .ww-foot a:hover {
  color: var(--accent) !important;
}

.ww.dark .ww-foot b {
  color: var(--ink) !important;
}

.ww.dark .ww-foot .ww-disc {
  color: var(--muted) !important;
}

.ww.dark .ww-foot .ww-copy span {
  color: var(--muted) !important;
}

.ww.dark .ww-foot .r input {
  background: var(--cream) !important;
  border-color: var(--line2) !important;
  color: var(--ink) !important;
}

.ww.dark .ww-foot .r button {
  background: var(--ink) !important;
  color: #fff !important;
}

/* Pillar cards */
.ww.dark .ww-pillcard {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

.ww.dark .ww-pillcard .ww-pillen {
  color: var(--muted) !important;
}

.ww.dark .ww-pillcard .ww-pillt {
  color: var(--ink) !important;
}

.ww.dark .ww-pillcard .ww-pillline {
  color: var(--soft) !important;
}

.ww.dark .ww-pilltag {
  color: var(--soft) !important;
  background: var(--cream) !important;
  border-color: var(--line2) !important;
}

.ww.dark .ww-pillart {
  border-color: var(--line) !important;
}

.ww.dark .ww-pillart .t {
  color: var(--ink) !important;
}

.ww.dark .ww-pillart .tag {
  color: var(--soft) !important;
}

/* About section */
.ww.dark .ww-about {
  background: linear-gradient(180deg, #1a1d24, var(--cream)) !important;
}

.ww.dark .ww-about h3 {
  color: var(--ink) !important;
}

.ww.dark .ww-about p {
  color: var(--soft) !important;
}

.ww.dark .ww-acreds span {
  color: var(--ink) !important;
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

/* Social section */
.ww.dark .ww-social {
  background: var(--paper) !important;
}

.ww.dark .ww-social h4 {
  color: var(--ink) !important;
}

.ww.dark .ww-social p {
  color: var(--soft) !important;
}

.ww.dark .ww-soc {
  color: var(--soft) !important;
  border-color: var(--line2) !important;
}

.ww.dark .ww-soc:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Smooth transition for dark mode toggle */
.ww,
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ww,
  body {
    transition: none;
  }
}

/* Knowledge points section */
.ww.dark .ww-grppts {
  background: var(--cream) !important;
}

.ww.dark .ww-grppts .lbl {
  color: var(--muted) !important;
}

.ww.dark .ww-grppts span {
  color: var(--soft) !important;
  background: var(--paper) !important;
  border-color: var(--line2) !important;
}

/* Pillar topics (tags) */
.ww.dark .ww-pilltopics span {
  color: var(--soft) !important;
  background: var(--cream) !important;
  border-color: var(--line2) !important;
}