/* theme-dark.css — override :root vars when data-theme=dark */
html[data-theme="dark"] {
  --ink-900: #F5F7FA;
  --ink-700: #D5DAE0;
  --ink-500: #98A2B3;
  --ink-300: #667085;
  /* DESIGN-REVIEW C2 (2026-04-19): night mode base #1A1E28 — cooler blue-purple, less greenish */
  --bg: #1A1E28;
  --surface: #232838;
  --surface-2: #2D3344;
  --brand: #66BB6A;
  --brand-dark: #4CAF50;
  --action: #FF8A65;
  --action-dark: #FF7043;
  --gold: #FFCA28;
  --border: #2A3138;
  --border-light: #242B30;
  --text-primary: #F5F7FA;
  --text-secondary: #D5DAE0;
  --text-muted: #98A2B3;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
  background: var(--bg);
  color: var(--ink-900);
}

/* Applying globally — images slightly dim, keep hero bg images visible */
html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink-900);
}

/* Hero images + gradient cards: reduce brightness a touch so they don't glare */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .city-card,
html[data-theme="dark"] .dest-card,
html[data-theme="dark"] .plan-summary {
  filter: brightness(0.92);
}

/* Theme toggle button adapts */
html[data-theme="dark"] #wg-theme-btn {
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  color: var(--ink-900);
}

/* Search overlay & panels */
html[data-theme="dark"] .search-hot-chip {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink-900);
}
html[data-theme="dark"] .search-facet-chip {
  background: var(--surface-2);
  color: var(--ink-700);
}
html[data-theme="dark"] .search-input,
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="text"] {
  background: var(--surface-2);
  color: var(--ink-900);
  border-color: var(--border);
}

/* Section backgrounds for the standalone pages */
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .section,
html[data-theme="dark"] .arch-card,
html[data-theme="dark"] .facet-card,
html[data-theme="dark"] .hero-stat,
html[data-theme="dark"] .day-card,
html[data-theme="dark"] .map-wrap,
html[data-theme="dark"] .top-nav {
  background: var(--surface);
  color: var(--ink-900);
}

html[data-theme="dark"] .top-nav {
  background: rgba(26, 32, 36, 0.9);
  border-bottom-color: var(--border);
}

/* Compare table */
html[data-theme="dark"] .compare-table th,
html[data-theme="dark"] .compare-table td {
  background: var(--surface);
  color: var(--ink-900);
  border-bottom-color: var(--surface-2);
}
html[data-theme="dark"] .compare-table th {
  background: var(--surface-2);
}
html[data-theme="dark"] .chip {
  background: var(--surface-2);
  color: var(--ink-700);
}

/* Timeline on stats page */
html[data-theme="dark"] #timeline li {
  color: var(--ink-700);
}

/* Planner dest-item hover */
html[data-theme="dark"] .dest-item {
  color: var(--ink-900);
}

/* Description quote block */
html[data-theme="dark"] .description {
  background: var(--surface-2);
  color: var(--ink-700);
}

/* Tag pills */
html[data-theme="dark"] .tag {
  background: var(--surface-2);
  color: var(--ink-700);
}