/* ============================================================
   intelligence-theme.css — BankPricer Intelligence Dark Theme
   Tokyo Night Storm palette
   Load AFTER inline <style> to override :root variables.
   ============================================================ */

/* --- CSS Variable Overrides (Tokyo Night Storm) --- */
:root {
  /* Base backgrounds */
  --bg: #1a1b2e;
  --bg-surface: #1e2030;
  --bg-elevated: #242637;

  /* Text (inverted from light theme) */
  --ink: #c8d1f5;
  --ink-muted: #b4bdd6;
  --ink-faint: #8891b3;

  /* Accent colors (brighter for dark bg) */
  --purple: #7aa2f7;
  --purple-lt: #89b4fa;
  --purple-bg: rgba(122,162,247,0.08);
  --purple-mid: rgba(122,162,247,0.12);

  /* Utility colors */
  --green: #9ece6a;
  --green-bg: rgba(158,206,106,0.08);
  --amber: #e0af68;
  --amber-bg: rgba(224,175,104,0.08);

  /* Surfaces (inverted) */
  --white: #1a1b2e;
  --border: #3b3d57;
  --border-light: rgba(59,61,87,0.5);

  /* Shadows (subtle on dark) */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 56px rgba(0,0,0,0.35);

  /* Radius (unchanged) */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
}

/* --- Body & Base --- */
body {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

/* --- 1. NAV (dropdown only — nav is already dark-native) --- */

.nav-dropdown-menu {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-md) !important;
}
.nav-dd-item:hover { background: rgba(122,162,247,0.08) !important; }
.nav-dd-icon {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
.nav-dd-title { color: var(--ink) !important; }
.nav-dd-desc { color: var(--ink-muted) !important; }
.nav-dd-footer {
  border-top-color: var(--border) !important;
  color: var(--ink-muted) !important;
}

/* --- 2. ARTICLE --- */

.article-container { color: var(--ink); }
.article-header h1 { color: #e8ecff; }
.article-meta { color: var(--ink-muted); }
.article-body { color: var(--ink-muted); }
.article-body h2 { color: #e8ecff; }
.article-body h3 { color: var(--ink); }
.article-body strong { color: #e8ecff; }
.article-body a { color: var(--purple); }
.breadcrumb { background: var(--bg-surface); }

/* --- 3. STAT CARDS --- */

.stat-row,
.stat-grid { gap: 16px; }

.stat-card {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--ink);
}
.stat-card.highlight {
  background: var(--purple-bg) !important;
  border-color: rgba(122,162,247,0.2) !important;
}
.stat-value { color: #e8ecff !important; }
.stat-label { color: var(--ink-muted) !important; }
.stat-box { background: var(--bg-elevated) !important; }
.stat-num { color: #e8ecff !important; }

/* --- 4. CALLOUTS --- */

.callout {
  background: rgba(122,162,247,0.06) !important;
  border-left: 3px solid var(--purple) !important;
  color: var(--ink-muted);
}
.callout-green {
  background: rgba(158,206,106,0.06) !important;
  border-left-color: var(--green) !important;
}
.callout-red {
  background: rgba(248,113,113,0.06) !important;
  border-left-color: #f87171 !important;
}

/* --- 5. TABLES --- */

.comparison-table,
.compare-table,
.data-table,
.rate-table,
.breakeven-table,
.buydown-table,
.eligibility-table,
.math-table {
  border-color: var(--border) !important;
}

.comparison-table th,
.compare-table th,
.data-table th,
.rate-table th {
  background: var(--bg-surface) !important;
  color: var(--ink-faint) !important;
  border-color: var(--border) !important;
}

.comparison-table td,
.compare-table td,
.data-table td,
.rate-table td {
  border-color: var(--border-light) !important;
  color: var(--ink-muted) !important;
}

.comparison-table tr:hover td,
.data-table tr:hover td {
  background: var(--bg-elevated) !important;
}

.winner-row { background: rgba(158,206,106,0.06) !important; }
.highlight-row {
  background: rgba(122,162,247,0.06) !important;
  color: var(--green) !important;
}

/* --- 6. FAQ --- */

.faq-section { background: var(--bg-surface) !important; }
.faq-item { border-color: var(--border) !important; }
.faq-question { color: var(--ink) !important; }
.faq-answer { color: var(--ink-muted) !important; }

/* --- 7. CTA SECTIONS --- */

.cta-inline { background: var(--bg-elevated) !important; }
.cta-box {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
}
.cta-banner { background: var(--bg-surface) !important; }

/* --- 8. COMPARISON / VS BLOCKS --- */

.vs-block { border-color: var(--border) !important; }
.vs-side { background: var(--bg-elevated) !important; }
.vs-divider { background: var(--border) !important; }

.compare-card {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
}
.scenario-card {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
}
.scenario-card.dovish { border-left-color: var(--green) !important; }
.scenario-card.hawkish { border-left-color: #f87171 !important; }

/* --- 9. CARDS & DATA DISPLAYS --- */

.data-card {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
}
.data-card-label { color: var(--ink-faint) !important; }
.data-card-num { color: #e8ecff !important; }

.rate-card {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
}

.snapshot-card {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
}
.snapshot-value { color: #e8ecff !important; }

.template-box {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

/* --- 10. STEPS / CHECKLISTS / PLAYBOOKS --- */

.step-block { border-color: var(--border) !important; }
.step-num {
  background: var(--purple) !important;
  color: #fff !important;
}

.checklist { background: var(--bg-surface) !important; }
.check { border-color: var(--border) !important; }

.key-takeaways {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

.playbook-num {
  background: var(--purple-bg) !important;
  color: var(--purple) !important;
}

.definition-block {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
.example-box {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

.qa-q-label,
.qa-a-label {
  color: #fff !important;
}

/* --- 11. BUTTONS --- */

.btn-white {
  background: var(--bg-elevated) !important;
  color: var(--purple) !important;
  border: 1px solid var(--border) !important;
}
.btn-white:hover { background: var(--bg-surface) !important; }

.btn-outline {
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
.btn-outline:hover {
  border-color: var(--purple) !important;
  color: var(--purple) !important;
}

/* --- 12. BLOG INDEX --- */

.blog-hero { background: var(--bg) !important; }

.featured-post { background: var(--bg-elevated) !important; }

.post-card {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
.post-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important; }
.post-card-body { color: var(--ink); }
.post-card h3 a { color: var(--ink) !important; }
.post-card h3 a:hover { color: var(--purple) !important; }
.post-card p { color: var(--ink-muted) !important; }

.topics-section { background: var(--bg-surface) !important; }

.topic-pill {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
.topic-pill:hover {
  border-color: var(--purple) !important;
  color: var(--purple) !important;
}

.start-here {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
.start-pill {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

.filter-chip {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--ink-muted) !important;
}
.filter-chip:hover {
  border-color: var(--purple) !important;
  color: var(--purple) !important;
}
.filter-chip.active {
  background: var(--purple) !important;
  color: #fff !important;
  border-color: var(--purple) !important;
}

/* --- 13. SIDEBAR (blog v1.1) --- */

.sidebar-link {
  color: var(--ink-muted) !important;
  background: none !important;
  border-color: var(--border) !important;
}
.sidebar-link:hover {
  color: var(--purple) !important;
  background: var(--purple-bg) !important;
}
.sidebar-link.active {
  color: var(--purple) !important;
  background: var(--purple-bg) !important;
}
.sidebar-cta {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

/* --- 14. UTILITY / COMPLIANCE --- */

.compliance,
.compliance-note {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--ink-muted) !important;
}

.article-utility-nav a {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
.article-utility-nav a:hover {
  border-color: var(--purple) !important;
  color: var(--purple) !important;
}

.skip-link {
  background: var(--purple) !important;
  color: #fff !important;
}

/* --- 15. DIRECTION INDICATORS --- */

.up { color: var(--green) !important; }
.down { color: #f87171 !important; }

/* --- 16. REDUCED MOTION --- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}