/* =========================================================
   NATHAN Theme System
   Default: dark. Light mode is applied with html[data-theme="light"].
   ========================================================= */

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-main: #020617;
  --bg-surface: #07111f;
  --bg-card: #0f172a;
  --bg-card-hover: #111c35;
  --bg-input: #020617;
  --text-main: #e5e7eb;
  --text-strong: #f9fafb;
  --text-muted: #9ca3af;
  --text-soft: #d1d5db;
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);
  --button-primary-bg: #2563eb;
  --button-primary-bg-hover: #3b82f6;
  --button-primary-text: #ffffff;
  --button-secondary-bg: rgba(255, 255, 255, 0.08);
  --button-secondary-bg-hover: rgba(255, 255, 255, 0.12);
  --button-secondary-text: #e5e7eb;
  --accent: #60a5fa;
  --accent-soft: rgba(37, 99, 235, 0.16);
  --shadow-soft: none;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-main: #f7f7f5;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f2f2ef;
  --bg-input: #ffffff;
  --text-main: #111111;
  --text-strong: #050505;
  --text-muted: #5f6368;
  --text-soft: #3f4247;
  --border-subtle: #e5e5e0;
  --border-strong: #d2d2cc;
  --button-primary-bg: #111111;
  --button-primary-bg-hover: #2a2a2a;
  --button-primary-text: #ffffff;
  --button-secondary-bg: #f0f0ed;
  --button-secondary-bg-hover: #e6e6e1;
  --button-secondary-text: #111111;
  --accent: #111111;
  --accent-soft: #eeeeea;
  --shadow-soft: 0 18px 42px rgba(17, 17, 17, 0.06);
}

.theme-toggle {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.theme-toggle:hover {
  border-color: var(--border-strong);
  background: var(--button-secondary-bg-hover);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Shared light-mode surface for Tailwind-heavy NATHAN pages. */
html[data-theme="light"] body {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
}

html[data-theme="light"] body:is(.bg-\[\#020617\]),
html[data-theme="light"] .bg-\[\#020617\],
html[data-theme="light"] .from-\[\#020617\],
html[data-theme="light"] .to-\[\#020617\]\/80,
html[data-theme="light"] .eu-shell,
html[data-theme="light"] .min-h-screen.bg-\[\#020617\],
html[data-theme="light"] .min-h-screen {
  background: var(--bg-main) !important;
}

html[data-theme="light"] .bg-\[\#07111f\],
html[data-theme="light"] .legal-sidebar,
html[data-theme="light"] .research-sidebar,
html[data-theme="light"] .eu-sidebar,
html[data-theme="light"] .sidebar,
html[data-theme="light"] #mobileNav {
  background: var(--bg-surface) !important;
}

html[data-theme="light"] .bg-\[\#0f172a\],
html[data-theme="light"] .card,
html[data-theme="light"] .board-card,
html[data-theme="light"] .panel-white,
html[data-theme="light"] .panel-soft,
html[data-theme="light"] .legal-panel,
html[data-theme="light"] .legal-card,
html[data-theme="light"] .legal-subcard,
html[data-theme="light"] .research-panel,
html[data-theme="light"] .research-card,
html[data-theme="light"] .eu-panel,
html[data-theme="light"] .eu-card,
html[data-theme="light"] .control-bar,
html[data-theme="light"] .avatar-panel,
html[data-theme="light"] .chat-panel,
html[data-theme="light"] .learning-panel,
html[data-theme="light"] .sprachlehrer-transcript-panel {
  border-color: var(--border-subtle) !important;
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="light"] .legal-card:hover,
html[data-theme="light"] .research-card:hover,
html[data-theme="light"] .eu-card:hover,
html[data-theme="light"] .doc-card:hover {
  border-color: var(--border-strong) !important;
  background: var(--bg-card-hover) !important;
}

html[data-theme="light"] header,
html[data-theme="light"] .site-header {
  border-color: var(--border-subtle) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--text-main) !important;
}

html[data-theme="light"] :is(
  .text-white,
  .text-gray-100,
  .text-gray-200,
  .text-gray-300,
  .text-slate-100,
  .text-slate-200,
  .text-slate-300,
  h1,
  h2,
  h3,
  .brand strong,
  .message-role
) {
  color: var(--text-strong) !important;
}

html[data-theme="light"] :is(
  .text-gray-400,
  .text-gray-500,
  .text-gray-600,
  .text-slate-400,
  .text-slate-500,
  .legal-label,
  .legal-help,
  .research-label,
  .eu-chip,
  .subtitle,
  .voice-note,
  .empty-state,
  .brand small,
  .nav-list a,
  .workspace-nav-item
) {
  color: var(--text-muted) !important;
}

html[data-theme="light"] :is(
  .border-white\/10,
  .border-white\/\[0\.10\],
  .border-blue-400\/25,
  .border-blue-500\/20,
  .border,
  .legal-input,
  .research-input,
  .eu-input,
  .eu-textarea,
  input,
  textarea,
  select
) {
  border-color: var(--border-subtle) !important;
}

html[data-theme="light"] :is(input, textarea, select, .legal-input, .research-input, .eu-input, .eu-textarea) {
  background: var(--bg-input) !important;
  color: var(--text-main) !important;
}

html[data-theme="light"] :is(input, textarea)::placeholder {
  color: #8a8d92 !important;
}

html[data-theme="light"] :is(
  .bg-white\/\[0\.03\],
  .bg-white\/\[0\.04\],
  .bg-white\/\[0\.05\],
  .bg-white\/\[0\.06\],
  .bg-white\/5,
  .bg-white\/10,
  .legal-badge,
  .research-badge,
  .eu-chip,
  .health-pill,
  .doc-card,
  #global-search-results,
  .autocomplete-dropdown,
  .suggestion-container
) {
  border-color: var(--border-subtle) !important;
  background: var(--button-secondary-bg) !important;
  color: var(--button-secondary-text) !important;
}

html[data-theme="light"] :is(
  .bg-blue-600,
  .bg-sky-600,
  .legal-btn-primary,
  .research-btn-primary,
  .primary-button,
  #global-company-search-btn,
  #workspace-export-btn,
  #waitlist-submit,
  .button-primary,
  .btn-neon
) {
  border-color: var(--button-primary-bg) !important;
  background: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
}

html[data-theme="light"] :is(
  .bg-blue-600,
  .bg-sky-600,
  .legal-btn-primary,
  .research-btn-primary,
  .primary-button,
  #global-company-search-btn,
  #workspace-export-btn,
  #waitlist-submit,
  .button-primary,
  .btn-neon
):hover {
  background: var(--button-primary-bg-hover) !important;
}

html[data-theme="light"] :is(
  .legal-btn-secondary,
  .research-btn-secondary,
  .secondary-button,
  #workspace-refresh-btn,
  .button-secondary
) {
  border-color: var(--border-subtle) !important;
  background: var(--button-secondary-bg) !important;
  color: var(--button-secondary-text) !important;
}

html[data-theme="light"] :is(
  .legal-btn-secondary,
  .research-btn-secondary,
  .secondary-button,
  #workspace-refresh-btn,
  .button-secondary
):hover {
  background: var(--button-secondary-bg-hover) !important;
}

html[data-theme="light"] :is(.workspace-nav-icon, .eyebrow, .eu-link, .text-blue-300, .text-blue-400) {
  color: var(--accent) !important;
}

html[data-theme="light"] :is(.workspace-nav-item.active, .nav-list a.active, .eu-chip.active, .legal-tab.active, .legal-tab:hover) {
  border-color: var(--border-strong) !important;
  background: var(--accent-soft) !important;
  color: var(--text-strong) !important;
}

html[data-theme="light"] :is(table, thead, tbody, tr, td, th, .legal-pre, .research-pre) {
  border-color: var(--border-subtle) !important;
  background: transparent !important;
  color: var(--text-main) !important;
}

html[data-theme="light"] thead {
  background: #f0f0ed !important;
}

html[data-theme="light"] .hero-glow {
  background: radial-gradient(circle at 50% 8%, rgba(17, 17, 17, 0.06), transparent 34%) !important;
}

html[data-theme="light"] .sl-avatar-stage {
  background: #efefeb !important;
}

html[data-theme="light"] .call-control,
html[data-theme="light"] .sl-call-control {
  border-color: var(--border-subtle) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--text-main) !important;
}

html[data-theme="light"] .call-control-primary,
html[data-theme="light"] .sl-call-control-beta {
  background: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
}