/*
 * theme.css — dark mode for netism.org.
 *
 * The site is built on CSS custom-property tokens (--color-paper, --color-ink-*, --color-fg-*,
 * --color-ember-*, --color-hair, …). Dark mode redefines those tokens under [data-theme="dark"], so
 * everything that uses the tokens — the body, surfaces, prose, and the injected components (the
 * teacher, the study layer, the recommendation cards, the blog sidebar) — turns dark together. A
 * handful of global chrome pieces carry hardcoded light colors in their own component styles and are
 * corrected here. Opt-in only: the site stays light until the reader chooses dark.
 * Bump ?v= on every change.
 */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces */
  --color-paper:       #14110b;
  --color-paper-deep:  #1c170e;
  --color-stone:       #211b12;
  --color-vellum:      #1a1409;
  --color-cream-50:    #17130c;
  --color-cream-100:   #1e1810;
  --color-cream-200:   #272016;

  /* the ink ramp inverted: low ink was light (borders/bg), high ink was dark (text) */
  --color-ink-50:   #0c0b08;
  --color-ink-100:  #16130d;
  --color-ink-200:  #2a251b;
  --color-ink-300:  #3d3729;
  --color-ink-400:  #756d5d;
  --color-ink-500:  #a49b8a;
  --color-ink-600:  #c6bdac;
  --color-ink-700:  #ded6c6;
  --color-ink-800:  #ece4d5;
  --color-ink-900:  #f6efe1;
  --color-ink-950:  #fbf7ee;

  /* ember stays warm, a touch brighter so it reads on dark */
  --color-ember-300: #8a5f1c;
  --color-ember-400: #caa04e;
  --color-ember-500: #d8a850;
  --color-ember-600: #e6bd72;

  /* semantic roles */
  --color-bg:          #14110b;
  --color-fg:          var(--color-ink-800);
  --color-fg-strong:   var(--color-ink-900);
  --color-fg-muted:    var(--color-ink-500);
  --color-fg-faint:    var(--color-ink-400);
  --color-fg-on-cream: var(--color-ink-600);
  --color-link:        #9fb6f2;
  --color-link-hover:  #e6bd72;
  --color-accent:      var(--color-ember-500);
  --color-accent-text: #e6bd72;
  --color-hair:        rgba(240, 232, 214, 0.12);
  --color-hair-soft:   rgba(240, 232, 214, 0.06);
}

/* global chrome that carries hardcoded light colors in its own styles */
:root[data-theme="dark"] body { background: var(--color-bg); color: var(--color-fg); }

:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] header.site-header,
:root[data-theme="dark"] .scholar-header {
  background: rgba(20, 17, 11, 0.86) !important;
  border-bottom-color: var(--color-hair) !important;
}
:root[data-theme="dark"] .site-header .mega-menu,
:root[data-theme="dark"] .mega-panel,
:root[data-theme="dark"] [class*="mega"][class*="panel"],
:root[data-theme="dark"] .mega-corpus-intro { background: #1a160e !important; border-color: var(--color-hair) !important; }

/* the search box, chips and other cream fills */
:root[data-theme="dark"] .surf-paper,
:root[data-theme="dark"] .surf-paper-deep,
:root[data-theme="dark"] .surf-stone,
:root[data-theme="dark"] .surf-vellum { background: var(--color-paper-deep); color: var(--color-fg); }

/* footer */
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] footer.site-footer { background: #100d08 !important; }

/* the reading pages: force the body text and surfaces to the dark tokens (some rules set a
   hardcoded ink that would leave dark-on-dark) */
:root[data-theme="dark"] .sep-shell,
:root[data-theme="dark"] .ba,
:root[data-theme="dark"] .blog-article-page { background: var(--color-bg); }
:root[data-theme="dark"] .sep-article,
:root[data-theme="dark"] .sep-article :is(p, li, td, dd, figcaption),
:root[data-theme="dark"] .ba-prose,
:root[data-theme="dark"] .ba-prose :is(p, li, td, dd, figcaption) { color: var(--color-fg) !important; }
:root[data-theme="dark"] .sep-article :is(h1, h2, h3, h4, strong, b),
:root[data-theme="dark"] .ba-prose :is(h1, h2, h3, h4, strong, b) { color: var(--color-fg-strong) !important; }
:root[data-theme="dark"] .sep-toc,
:root[data-theme="dark"] .sep-toc a { background: transparent !important; }
:root[data-theme="dark"] .sep-toc a { color: var(--color-fg-muted) !important; }
:root[data-theme="dark"] .sep-toc a:hover,
:root[data-theme="dark"] .sep-toc li.active > a { color: var(--color-accent-text) !important; }
:root[data-theme="dark"] .ba-author-card { background: var(--color-paper-deep) !important; }
/* highlights: a warmer glow on dark so the marked text stays legible */
:root[data-theme="dark"] mark.nh { background: rgba(212,160,60,.30); color: var(--color-fg) !important; }

/* cards and inputs with white/near-white backgrounds */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: #1c170e; color: var(--color-fg); border-color: var(--color-hair);
}

/* the recommendation card, blog sidebar and study strip use tokens with light fallbacks; the tokens
   above override them, but their own inline light fallbacks need the token to win — it does. */

/* homepage feature blocks hardcode the cream fill instead of the token; flip them */
:root[data-theme="dark"] .hm-what,
:root[data-theme="dark"] .hm-journal,
:root[data-theme="dark"] .hm-what-frame,
:root[data-theme="dark"] .hm-what-light,
:root[data-theme="dark"] .hm-ground-text,
:root[data-theme="dark"] [class*="hm-"][class*="light"],
:root[data-theme="dark"] .hm-offer,
:root[data-theme="dark"] .hm-paths,
:root[data-theme="dark"] .hm-quote { background: var(--color-paper) !important; color: var(--color-fg) !important; }
:root[data-theme="dark"] .hm-what-frame,
:root[data-theme="dark"] .hm-card,
:root[data-theme="dark"] [class*="hm-"][class*="card"] { border-color: var(--color-hair) !important; }

/* generic near-white surface classes that recur across pages */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] [class$="-card"],
:root[data-theme="dark"] [class*="-panel"],
:root[data-theme="dark"] [class$="-frame"] { background: var(--color-paper-deep); color: var(--color-fg); }

/* the toggle button (injected) */
.nt-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid var(--color-hair, rgba(15,14,10,.16)); border-radius: 999px; background: transparent;
  color: var(--color-fg-muted, #5c554a); cursor: pointer; transition: color .15s, border-color .15s, background .15s; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.nt-theme-toggle:hover { color: var(--color-accent-text, #92600f); border-color: var(--color-ember-400, #d4a24e); }
.nt-theme-toggle svg { width: 16px; height: 16px; }
.nt-theme-toggle .nt-sun { display: none; }
.nt-theme-toggle .nt-moon { display: block; }
:root[data-theme="dark"] .nt-theme-toggle .nt-sun { display: block; }
:root[data-theme="dark"] .nt-theme-toggle .nt-moon { display: none; }
/* a floating fallback position if the header slot is not found */
.nt-theme-toggle.nt-float { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 42px; height: 42px; background: var(--color-paper, #faf6ee); box-shadow: 0 8px 24px -12px rgba(20,14,4,.5); }