/* Modo escuro — Roadmap WASM (todas as rotas: home, stack, /t/*, docs, trilhas) */

html[data-theme="dark"] {
  --road-surface-card: rgba(28, 25, 42, 0.82);
  --road-surface-muted: rgba(22, 20, 34, 0.65);
  --road-surface-chip: rgba(36, 32, 54, 0.9);
  --road-border-soft: rgba(124, 58, 237, 0.22);
  --road-text-primary: #e2e8f0;
  --road-text-secondary: #94a3b8;
  --road-text-muted: #64748b;
}

/* ---------- Artigos / docs (artigo-roadmap.css) ---------- */

html[data-theme="dark"] .art-page {
  --art-page-bg: transparent;
  --art-text-dark: #e2e8f0;
  --art-text-muted: #94a3b8;
  --art-text-soft: #64748b;
  --art-border: rgba(148, 163, 184, 0.14);
  background: transparent;
  color: var(--art-text-dark);
}

html[data-theme="dark"] .art-page--not-found,
html[data-theme="dark"] .art-page--loading {
  background: transparent;
}

html[data-theme="dark"] .art-pill.pill-label,
html[data-theme="dark"] .art-page--not-found .art-pill,
html[data-theme="dark"] .art-page .art-pill {
  background: rgba(76, 29, 149, 0.22);
  color: #c4b5fd;
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: none;
}

html[data-theme="dark"] .art-prose .road-doc-inline-ref {
  color: #94a3b8;
}

html[data-theme="dark"] .art-prose p code,
html[data-theme="dark"] .art-prose li code {
  background: rgba(30, 27, 46, 0.85);
  color: #c4b5fd;
  border-color: rgba(124, 58, 237, 0.2);
}

html[data-theme="dark"] .art-prose blockquote {
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.14), rgba(109, 40, 217, 0.08));
  color: #94a3b8;
}

html[data-theme="dark"] .art-prose blockquote p:last-child {
  color: #c4b5fd;
}

html[data-theme="dark"] .art-prose .warning {
  background: rgba(124, 45, 18, 0.35);
  color: #fdba74;
  border-color: rgba(234, 88, 12, 0.35);
}

html[data-theme="dark"] .art-prose .note {
  background: rgba(76, 29, 149, 0.18);
  color: #e2e8f0;
}

html[data-theme="dark"] .art-prose .compare-legacy,
html[data-theme="dark"] .art-prose .compare-modern,
html[data-theme="dark"] .art-prose .impact-card {
  background: var(--road-surface-card);
  border-color: var(--road-border-soft);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .art-prose th {
  background: rgba(124, 58, 237, 0.15);
}

html[data-theme="dark"] .art-share {
  background: transparent;
}

html[data-theme="dark"] .art-share-link,
html[data-theme="dark"] .art-back {
  background: var(--road-surface-card);
  color: var(--road-text-primary) !important;
  border-color: var(--road-border-soft);
}

html[data-theme="dark"] .art-share-link:hover,
html[data-theme="dark"] .art-share-link:focus-visible,
html[data-theme="dark"] .art-back:hover {
  color: #c4b5fd !important;
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(76, 29, 149, 0.2);
}

/* CTA final mantém gradiente — já legível em dark */

/* ---------- Stack / tech / índice / marcos ---------- */

html[data-theme="dark"] .road-stack-lead,
html[data-theme="dark"] .road-tech-sub,
html[data-theme="dark"] .road-tech-hint {
  color: var(--road-text-secondary);
}

html[data-theme="dark"] .road-tech-title,
html[data-theme="dark"] .road-tech-flow-title,
html[data-theme="dark"] .road-stack-card-title,
html[data-theme="dark"] .road-milestone-title,
html[data-theme="dark"] .road-essential-heading,
html[data-theme="dark"] .road-indice-section-title,
html[data-theme="dark"] .road-indice-level-heading {
  color: var(--road-text-primary);
}

html[data-theme="dark"] .road-stack-card,
html[data-theme="dark"] .road-tech-flow-node,
html[data-theme="dark"] .road-indice-level-card,
html[data-theme="dark"] .road-indice-meta-card {
  background: var(--road-surface-card);
  border-color: var(--road-border-soft);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  color: var(--road-text-primary) !important;
}

html[data-theme="dark"] .road-stack-card-sub,
html[data-theme="dark"] .road-milestone-desc,
html[data-theme="dark"] .road-essential-item {
  color: var(--road-text-secondary);
}

html[data-theme="dark"] .road-tech-flow-wrap {
  background: linear-gradient(180deg, transparent 0%, rgba(76, 29, 149, 0.08) 100%);
}

html[data-theme="dark"] .road-tech-flow-node--root,
html[data-theme="dark"] .road-tech-flow-node--cap {
  background: linear-gradient(120deg, rgba(76, 29, 149, 0.2), rgba(109, 40, 217, 0.12));
}

html[data-theme="dark"] .road-tech-flow-node {
  color: var(--road-text-primary) !important;
}

html[data-theme="dark"] .road-milestone-wrap {
  background: var(--road-surface-card);
  border-color: var(--road-border-soft);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .road-milestone-card {
  background: transparent;
}

html[data-theme="dark"] .road-milestone-chip,
html[data-theme="dark"] .road-indice-mat-card {
  background: var(--road-surface-chip);
  border-color: rgba(148, 163, 184, 0.12);
  color: var(--road-text-primary) !important;
}

html[data-theme="dark"] .road-milestone-chip:hover,
html[data-theme="dark"] .road-indice-mat-card:hover {
  background: rgba(76, 29, 149, 0.22);
  border-color: rgba(124, 58, 237, 0.4);
}

html[data-theme="dark"] .road-milestone-chip ::deep img.roadmap-tech-glyph__img {
  background: rgba(30, 27, 46, 0.9);
}

html[data-theme="dark"] .road-essential-tools {
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.12), rgba(109, 40, 217, 0.1));
  border-color: var(--road-border-soft);
}

html[data-theme="dark"] .road-indice-root-card {
  background: linear-gradient(90deg, rgba(76, 29, 149, 0.2), rgba(109, 40, 217, 0.14));
  border-color: var(--road-border-soft);
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .road-indice-mat-title {
  color: #c4b5fd;
}

html[data-theme="dark"] .road-indice-level-heading {
  border-bottom-color: rgba(148, 163, 184, 0.12);
}

/* Home — reforço */
html[data-theme="dark"] .road-hero-kicker,
html[data-theme="dark"] .road-featured-badge,
html[data-theme="dark"] .road-milestone-num,
html[data-theme="dark"] .road-stack-kicker {
  color: #c4b5fd;
}

html[data-theme="dark"] .road-hero-lead,
html[data-theme="dark"] .road-flow-sub,
html[data-theme="dark"] .road-milestones-sub,
html[data-theme="dark"] .road-featured-desc {
  color: var(--road-text-secondary);
}

html[data-theme="dark"] .road-flow-heading,
html[data-theme="dark"] .road-milestones-heading,
html[data-theme="dark"] .road-featured-title,
html[data-theme="dark"] .road-stack-title,
html[data-theme="dark"] .road-breadcrumb {
  color: var(--road-text-primary);
}

html[data-theme="dark"] .road-breadcrumb a,
html[data-theme="dark"] .road-breadcrumb a:link,
html[data-theme="dark"] .road-breadcrumb a:visited {
  color: var(--road-text-secondary) !important;
}

html[data-theme="dark"] .road-featured-card {
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.18) 0%, rgba(109, 40, 217, 0.14) 55%, rgba(49, 46, 129, 0.12) 100%);
  border-color: var(--road-border-soft);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .road-home-milestones {
  border-top-color: rgba(124, 58, 237, 0.2);
}

/* Rodapé */
html[data-theme="dark"] .road-footer {
  border-top-color: rgba(99, 102, 241, 0.22);
  background: linear-gradient(180deg, rgba(26, 22, 40, 0.88) 0%, rgba(18, 16, 28, 0.96) 100%);
  color: #94a3b8;
}