/*
 * theme.css — khurram.online dark mode ("The Study at Night")
 * Loaded LAST on every page (after page <style> blocks) so its rules win ties.
 *
 * Architecture: the palette lives in CSS variables, so [data-theme="dark"]
 * flips them. var(--ink) was split 2026-06-12: text stays --ink (flips to
 * light), surfaces use --ink-surface (stays dark in both themes).
 * Hardcoded #fff / grey-text components get explicit overrides below.
 */

/* ── Light defaults for the new tokens ─────────────────── */
:root {
  --ink-surface: #1E1E2E;   /* identical to light-mode --ink: zero visual change */
}

/* ── Theme toggle button ───────────────────────────────── */
.theme-toggle {
  background: none; border: 1px solid transparent; cursor: pointer;
  font-size: 1rem; line-height: 1;
  padding: 0.4rem 0.55rem; border-radius: 6px;
  color: var(--ink); opacity: 0.65;
  transition: opacity 0.2s, border-color 0.2s, transform 0.3s;
  flex-shrink: 0;
}
.theme-toggle:hover { opacity: 1; border-color: var(--cream-border); transform: rotate(15deg); }
.theme-toggle .tt-sun  { display: none; }
.theme-toggle .tt-moon { display: inline; }
[data-theme="dark"] .theme-toggle .tt-sun  { display: inline; }
[data-theme="dark"] .theme-toggle .tt-moon { display: none; }

/* ── Nav subscribe button (lives here: the one stylesheet on ALL pages) ── */
.nav-subscribe {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--amber, #C89B3C); color: #1E1E2E;
  border: none; border-radius: 4px; cursor: pointer;
  padding: 0.5rem 1rem;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 2px 10px rgba(200, 155, 60, 0.25);
  flex-shrink: 0;
}
.nav-subscribe:hover {
  background: var(--amber-light, #E2BB6A);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(200, 155, 60, 0.35);
}

/* mobile slots: hidden on desktop (the nav-links copies show there) */
.theme-toggle-mobile-slot, .nav-subscribe-mobile-slot { display: none; }
@media (max-width: 900px) {
  .nav-subscribe-mobile-slot { display: flex; margin-left: auto; }
  .nav-subscribe-mobile-slot .nav-subscribe { font-size: 0.6rem; padding: 0.45rem 0.8rem; }
  .theme-toggle-mobile-slot { display: flex; margin-left: 0.55rem; }
  .m-menu { margin-left: 0.55rem; }   /* shared.css sets auto; subscribe now owns the push */
}

/* smooth the switch */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ── THE NIGHT PALETTE ─────────────────────────────────── */
[data-theme="dark"] {
  --linen:        #16161F;   /* page background */
  --warm-paper:   #1F1F2C;   /* card / panel surfaces */
  --ink:          #E9E3D6;   /* text — warm cream */
  --ink-light:    #B6AC9C;
  --cream-border: #30304A;
  --sage:         #93A89A;
  --terracotta:   #CE8A66;
  --amber-dark:   #D9AE54;
  --amber-text:   #D9AE54;   /* AA on the dark surfaces */
  --sage-text:    #97AB9E;
  --ink-surface:  #101018;   /* ink panels go a step darker than the page */
}

/* ── Component overrides for hardcoded values ──────────── */

/* nav backdrop (widget pages use nav#navbar; index/root pages bare fixed nav).
   :not(.essay-toc) — the article TOC is semantically a <nav> and must NOT
   inherit the header backdrop. */
[data-theme="dark"] nav:not(.essay-toc),
[data-theme="dark"] nav#navbar {
  background: rgba(18, 18, 26, 0.92);
}
[data-theme="dark"] nav.scrolled,
[data-theme="dark"] nav#navbar.scrolled {
  border-color: var(--cream-border);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .essay-toc { background: var(--warm-paper); }

/* white card surfaces */
[data-theme="dark"] .article-card,
[data-theme="dark"] .related-card,
[data-theme="dark"] .q-card,
[data-theme="dark"] .r-frontier {
  background: #20202E;
}
[data-theme="dark"] .q-opt:hover { background: #262638; }

/* grey body text on light surfaces */
[data-theme="dark"] .article-content p,
[data-theme="dark"] .article-content ul,
[data-theme="dark"] .article-content ol { color: #CFC8B8; }
[data-theme="dark"] .card-excerpt,
[data-theme="dark"] .read-next-excerpt,
[data-theme="dark"] .related-excerpt,
[data-theme="dark"] .newsletter-card p,
[data-theme="dark"] .r-news p,
[data-theme="dark"] .r-frontier-item span { color: #A9A294; }
[data-theme="dark"] .card-footer { color: #8E897C; border-color: var(--cream-border); }
[data-theme="dark"] .ref-card p,
[data-theme="dark"] .principle-card p,
[data-theme="dark"] .closing-note { color: #C5BEAE; }

/* form fields (covers inline-styled #fff inputs on index too) */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] textarea {
  background: #20202E !important;
  color: var(--ink) !important;
  border-color: var(--cream-border) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #7A7568; }

/* skip-link sits on ink-surface; --linen is now the dark page bg, so use --ink */
[data-theme="dark"] .skip-link { color: var(--ink); }

/* images: ease the brightness a touch at night */
[data-theme="dark"] img { filter: brightness(0.88); }
[data-theme="dark"] .nav-brand img,
[data-theme="dark"] .lel-avatar { filter: none; }

/* ambient glows read stronger on dark — soften */
[data-theme="dark"] .ambient-glow { opacity: 0.6; }

/* ── DARK POLISH PASS 1 (audit-driven, 2026-06-13) ────── */
/* generic: list items with hardcoded dark ink (AI template et al.) */
[data-theme="dark"] li { color: #CFC8B8; }
[data-theme="dark"] nav li, [data-theme="dark"] .nav-links li { color: inherit; }

/* generic: inline-styled hardcoded light surfaces flip to warm-paper */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background:#FAF7F2"],
[data-theme="dark"] [style*="background: #FAF7F2"],
[data-theme="dark"] [style*="background:#F5F0E8"],
[data-theme="dark"] [style*="background: #F5F0E8"],
[data-theme="dark"] [style*="background:var(--warm-paper,#F5F0E8)"] {
  background: var(--warm-paper) !important;
}

/* named components from the audit — dark text on flipped panels */
[data-theme="dark"] .gc-row-text,
[data-theme="dark"] .version-personal,
[data-theme="dark"] .theory-flag,
[data-theme="dark"] .d-line,
[data-theme="dark"] .art-read-time { color: #C5BEAE; }

/* ── DARK POLISH PASS 2 (2026-06-13) ──────────────────── */
/* text that used var(--linen) as "light" — flips dark in dark mode */
[data-theme="dark"] [style*="color:var(--linen)"],
[data-theme="dark"] [style*="color: var(--linen)"] { color: #E9E3D6 !important; }
[data-theme="dark"] .page-hero-title,
[data-theme="dark"] .gave-header { color: #E9E3D6; }

/* page-local text tokens */
[data-theme="dark"] { --text-primary: #E9E3D6; --text-secondary: #C5BEAE; }

/* light class-css cards that did not flip */
[data-theme="dark"] .son-card,
[data-theme="dark"] .series-card { background: #20202E; border-color: var(--cream-border); }
[data-theme="dark"] .series-title { color: #E9E3D6; }
[data-theme="dark"] .series-read,
[data-theme="dark"] .art-min { color: #97AB9E; }

/* named text bumps from audit v4 */
[data-theme="dark"] .version-personal,
[data-theme="dark"] .theory-flag,
[data-theme="dark"] .dream-note,
[data-theme="dark"] .dream-note p,
[data-theme="dark"] .son-desc { color: #C5BEAE; }
[data-theme="dark"] .ey-badge { color: var(--amber-light); }

/* footer small print: dim by design, but keep readable at night */
[data-theme="dark"] .footer-copy,
[data-theme="dark"] .footer-copy span { color: rgba(250,247,242,0.62); }

/* ── DARK POLISH PASS 3 — light class-css containers ──── */
[data-theme="dark"] .art-card, [data-theme="dark"] .book-card,
[data-theme="dark"] .scorecard-body, [data-theme="dark"] .theory-col,
[data-theme="dark"] .card, [data-theme="dark"] .tag,
[data-theme="dark"] .size-card-body, [data-theme="dark"] .version-body,
[data-theme="dark"] .impact-card, [data-theme="dark"] .trend-card-body,
[data-theme="dark"] .force-card, [data-theme="dark"] .force-block,
[data-theme="dark"] .field-card, [data-theme="dark"] .grade-card,
[data-theme="dark"] .series-card {
  background: #20202E !important; border-color: var(--cream-border) !important;
}
[data-theme="dark"] .sr-to { background: #28220F !important; }
[data-theme="dark"] .notice-board { background: #28260F !important; }
[data-theme="dark"] .not-for-you, [data-theme="dark"] .warning-card { background: #2A1F1B !important; }

/* common text inside those cards (hardcoded dark greys) */
[data-theme="dark"] .art-card p, [data-theme="dark"] .art-card span,
[data-theme="dark"] .book-card p, [data-theme="dark"] .book-card span,
[data-theme="dark"] .scorecard-body td, [data-theme="dark"] .theory-col p,
[data-theme="dark"] .card p, [data-theme="dark"] .card span, [data-theme="dark"] .card strong,
[data-theme="dark"] .size-card-body p, [data-theme="dark"] .size-card-body li,
[data-theme="dark"] .version-body p, [data-theme="dark"] .version-body li,
[data-theme="dark"] .impact-card p, [data-theme="dark"] .impact-card span,
[data-theme="dark"] .trend-card-body p, [data-theme="dark"] .trend-card-body li,
[data-theme="dark"] .force-card p, [data-theme="dark"] .force-card li,
[data-theme="dark"] .warning-card p, [data-theme="dark"] .not-for-you p,
[data-theme="dark"] .notice-board p, [data-theme="dark"] .notice-board li,
[data-theme="dark"] td { color: #CFC8B8; }
[data-theme="dark"] .art-card h3, [data-theme="dark"] .book-card h3,
[data-theme="dark"] .card h3, [data-theme="dark"] .card h4,
[data-theme="dark"] .impact-card h3, [data-theme="dark"] .trend-card-body h3,
[data-theme="dark"] .force-card h3, [data-theme="dark"] .warning-card h4,
[data-theme="dark"] .force-card h4 { color: #E9E3D6; }
[data-theme="dark"] .force-area, [data-theme="dark"] .trend-insight,
[data-theme="dark"] .impact-trend-name, [data-theme="dark"] .field-num,
[data-theme="dark"] .trend-num { color: #97AB9E; }

/* ── DARK POLISH PASS 4 — final sweep ─────────────────── */
/* Every intended-light container is darkened by now, so any remaining
   hardcoded-dark heading/emphasis text is dark-on-dark: force light. */
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] strong { color: #E9E3D6; }
[data-theme="dark"] em { color: var(--terracotta); }

/* chips, pills & badges flagged by the audit */
[data-theme="dark"] .grade-chip, [data-theme="dark"] .force-nav-label,
[data-theme="dark"] .force-nav-link, [data-theme="dark"] .underrated-badge,
[data-theme="dark"] .inno-pill, [data-theme="dark"] .skill-tag,
[data-theme="dark"] .achievement-chip, [data-theme="dark"] .spectrum-chip {
  color: #D8D2C4;
}
[data-theme="dark"] .btn-ghost { color: #C5BEAE; border-color: var(--cream-border); }

/* ── DARK POLISH PASS 5 — scoped, audit-mirrored ──────── */
/* forces-* tinted headers: dark-tinted h3 on coloured bands */
[data-theme="dark"] .force-header h3 { color: #F2EDE2 !important; }
[data-theme="dark"] .force-header .force-num { filter: brightness(1.15); }

/* dark-grey content classes inside (now dark) cards */
[data-theme="dark"] .tldr-list li, [data-theme="dark"] .unsure-list li,
[data-theme="dark"] .audience-list li, [data-theme="dark"] .lab-steps li,
[data-theme="dark"] .contrast-col--light ul li,
[data-theme="dark"] .stakeholder-spec, [data-theme="dark"] .es-step,
[data-theme="dark"] .gap-text, [data-theme="dark"] .timeline-text,
[data-theme="dark"] .grounded-scene p, [data-theme="dark"] .converge-block p,
[data-theme="dark"] .failure-card p, [data-theme="dark"] .phase-hook,
[data-theme="dark"] .reading-story p,
[data-theme="dark"] .pyramid-title { color: #CFC8B8 !important; }

/* lucky-generation pills & emphasis inside its cards */
[data-theme="dark"] .inno-pill, [data-theme="dark"] .tag {
  background: #2A2A3E !important; color: #D8D2C4 !important;
}
[data-theme="dark"] .card strong, [data-theme="dark"] .sr-to strong,
[data-theme="dark"] .card em, [data-theme="dark"] .sr-to em { color: #E9E3D6 !important; }

/* craft chips: ink-family blues/greens too dark on night surfaces */
[data-theme="dark"] .achievement-chip.metric { color: #7C9CF0 !important; }
[data-theme="dark"] .achievement-chip.award { color: #4BAE8A !important; }
[data-theme="dark"] .skill-tag { color: #E9E3D6 !important; background: rgba(200,155,60,0.18) !important; }

/* index AI-teaser blue accents: lift for night */
[data-theme="dark"] .ai-teaser-heading em, [data-theme="dark"] .ai-preview-arrow,
[data-theme="dark"] .ai-article-preview:hover { color: #7FB7E8 !important; }

/* ── DARK POLISH PASS 6 — inspector-guided finals ─────── */
/* light tinted containers under already-light text */
[data-theme="dark"] .redflag-block { background: #2A1B1B !important; }
[data-theme="dark"] .public-line { background: #24202E !important; }
[data-theme="dark"] .decade-memory { background: #28220F !important; color: #C5BEAE; }

/* nested span inside inline link-cards (ai-adoption) */
[data-theme="dark"] .article-content a span span { color: #CFC8B8 !important; }

/* inline-styled accents that are too dark at night */
[data-theme="dark"] [style*="124, 58, 237"] { color: #A78BFA !important; }
[data-theme="dark"] [style*="#7C3AED"] { color: #A78BFA !important; }
[data-theme="dark"] [style*="color:#2451B7"], [data-theme="dark"] [style*="color: #2451B7"] { color: #7C9CF0 !important; }
[data-theme="dark"] [style*="color:#555"], [data-theme="dark"] [style*="color: #555"] { color: #A9A294 !important; }
[data-theme="dark"] [style*="color:#666"], [data-theme="dark"] [style*="color: #666"] { color: #A9A294 !important; }

/* amber-filled buttons keep ink text in both themes */
[data-theme="dark"] [style*="background:var(--amber)"],
[data-theme="dark"] [style*="background: var(--amber)"] { color: #1E1E2E !important; }

/* index hardcoded nav: Portrait button uses literal ink */
[data-theme="dark"] .nav-portrait-wrap > button { color: var(--ink) !important; }

/* craft tier descriptions (bare #555 paragraphs in grid cells) */
[data-theme="dark"] .tier p, [data-theme="dark"] .tier-desc,
[data-theme="dark"] .levels p { color: #A9A294 !important; }

[data-theme="dark"] [style*="124,58,237"] { color: #A78BFA !important; }

/* ── ai-guide dark fixes (live-site report 2026-06-13) ── */
[data-theme="dark"] .mission-inner p,
[data-theme="dark"] .clarity-list li { color: #C5BEAE !important; }
[data-theme="dark"] .path-route { color: #97AB9E !important; }