/* Persistent dark theme for public Janus.Guru journeys.
   Loaded after each page stylesheet so existing semantic tokens stay authoritative. */
html[data-theme="dark"] {
  color-scheme: dark;
  --surface-canvas: #171b19;
  --surface-base: #202622;
  --surface-muted: #1b211d;
  --surface-elevated: rgba(32, 38, 34, 0.94);
  --surface-hover: #2a332d;
  --surface-icon: #26342c;
  --surface-code: #141917;
  --surface-header: rgba(23, 27, 25, 0.9);
  --surface-header-scrolled: rgba(23, 27, 25, 0.97);
  --surface-user-message: #e6ebe4;
  --surface-bot-message: #202622;
  --color-text-primary: #f0f4ee;
  --color-text-secondary: #c0c9c2;
  --color-text-muted: #99a69d;
  --color-text-inverse: #171b19;
  --color-text-on-accent: #171b19;
  --color-text-code-muted: rgba(192, 201, 194, 0.7);
  --color-text-code-secondary: rgba(240, 244, 238, 0.8);
  --color-accent-primary: #d7b75b;
  --color-accent-primary-hover: #ecd078;
  --color-accent-primary-soft: #453a1d;
  --color-accent-primary-subtle: #302916;
  --color-accent-primary-muted: rgba(215, 183, 91, 0.36);
  --color-accent-primary-active: #f0d983;
  --color-accent-secondary: #62c2b4;
  --color-accent-secondary-soft: #173b35;
  --color-border-default: #445048;
  --color-border-subtle: #303a34;
  --color-border-code: rgba(240, 244, 238, 0.2);
  --color-border-code-strong: rgba(240, 244, 238, 0.34);
  --color-border-code-subtle: rgba(240, 244, 238, 0.1);
  --color-border-accent-dashed: rgba(215, 183, 91, 0.46);
  --code-keyword: #ecd078;
  --code-string: #a6cf83;
  --code-comment: #a9b5ac;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.38);
  --shadow-header: 0 1px 0 rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 6px 24px rgba(0, 0, 0, 0.32);
  --shadow-demo: 0 8px 32px rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] body {
  background: var(--surface-canvas);
}

html[data-theme="dark"] .header-chat,
html[data-theme="dark"] #inputArea {
  background: rgba(23, 27, 25, 0.92);
}

html[data-theme="dark"] .input-wrap {
  background: rgba(32, 38, 34, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .input-wrap:focus-within {
  background: #202622;
  box-shadow: 0 10px 30px rgba(215, 183, 91, 0.16);
}

html[data-theme="dark"] .hero-brief,
html[data-theme="dark"] .seo-card,
html[data-theme="dark"] .corpus-card,
html[data-theme="dark"] .demo-card,
html[data-theme="dark"] .case-card,
html[data-theme="dark"] .audit-card,
html[data-theme="dark"] .pilot-card {
  background: var(--surface-base);
}

html[data-theme="dark"] .data-lab-hero-visual,
html[data-theme="dark"] .data-lab-region-profile,
html[data-theme="dark"] .data-lab-region-profile.is-b,
html[data-theme="dark"] .data-lab-topic,
html[data-theme="dark"] .regions-map-card,
html[data-theme="dark"] .regions-map-metric,
html[data-theme="dark"] .regions-map-compact {
  background: var(--surface-base);
}

html[data-theme="dark"] .data-lab-map-region,
html[data-theme="dark"] .data-lab-map-marker {
  stroke: var(--surface-base);
}

html[data-theme="dark"] .data-lab-bar-track,
html[data-theme="dark"] .regions-map-viewport {
  background: var(--surface-muted);
}

html[data-theme="dark"] ::selection {
  color: #171b19;
  background: #ecd078;
}