/* Dark mode: a calm, near-neutral slate with just enough cool hue to
   feel like night without being agitated. Promoted to default 2026-06-14
   after a week riding the dev switch; the original warm-brown family
   stays available behind .palette-brown for anyone who wants it back.

   Design rationale (the trajectory that produced the values):
     - Started from Content Claude's deck-cover blue #0e1420 / #161d2b.
       Both brighter AND more saturated than the brown — felt less calm.
     - Pulled bg/surface to match the brown's L+S (hsl 220° 11% 7%/11%
       vs brown's 30° 11% 7%/11%): same darkness, same low saturation,
       just rotated hue. The result reads "almost black with a hint of
       cool" — close to grey but distinctly not warm.
     - Amber accent kept warm (hsl 30° 68% 58% = #dd944b) — the warm/
       cool contrast carries the brand without screaming.
     - Highlight wash dropped to alpha 0.05 — the underline + kanji
       colour carry the new-word signal, the bg wash competed.
     - Text muted pulled WARMER (cream #c3bcae) so secondary text in
       annotated boxes doesn't read as "blue text" — boxes carry the
       colour via border + bg, text stays warm. */
html.dark {
  --bg: #101114;
  --surface: #191b1f;
  --text: #ebe6dc;
  --text-muted: #c3bcae;
  --text-light: #847d70;
  --accent: #dd944b;
  --accent-soft: #1f2738;
  --accent-light: #1f2738;
  --new-word: #dd944b;
  --new-word-bg: rgba(221, 148, 75, 0.05);
  --reinforcing: #7eb3d8;
  --reinforcing-bg: rgba(126, 179, 216, 0.10);
  --known: #ebe6dc;
  --correction-bg: rgba(220, 100, 80, 0.10);
  --correction-border: #e0664a;
  --trap-bg: rgba(221, 148, 75, 0.12);
  --trap-border: #dd944b;
  --grammar-bg: rgba(155, 130, 200, 0.10);
  --grammar-border: #a890c8;
  --fragment-bg: rgba(126, 179, 216, 0.08);
  --fragment-border: #7eb3d8;
  --border: #2c2e33;
  --border-light: #20232a;
  --radius: 6px;
}

/* Brown family — the original 70s-tinted warm dark night palette,
   inspired by the Kyoto night map (lanterns, not neon). Available
   via ?palette=brown (persisted in localStorage by theme.js) for
   anyone who preferred the original tone. */
html.dark.palette-brown {
  --bg: #141210;
  --surface: #1e1b18;
  --text: #e8e0d4;
  --text-muted: #a89a88;
  --text-light: #6b6058;
  --accent: #d4944a;
  --accent-soft: #3a3020;
  --accent-light: #3a3020;
  --new-word: #d4944a;
  --new-word-bg: rgba(212, 148, 74, 0.12);
  --reinforcing: #6b9ec0;
  --reinforcing-bg: rgba(107, 158, 192, 0.1);
  --known: #a09585;
  --correction-bg: rgba(180, 120, 90, 0.08);
  --correction-border: #a07860;
  --trap-bg: rgba(210, 150, 60, 0.1);
  --trap-border: #c49a3c;
  --grammar-bg: rgba(140, 100, 160, 0.1);
  --grammar-border: #9a7ab0;
  --fragment-bg: rgba(107, 158, 192, 0.08);
  --fragment-border: #6b9ec0;
  --border: #3a3530;
  --border-light: #302b27;
}

/* (tooltip + romaji-hint backgrounds now use var(--surface) — see the
   rules further down. They follow whatever palette is active.) */

/* Body background */
html.dark body {
  background: var(--bg);
  color: var(--text);
}

/* Tooltips in dark mode — use the surface token so the bg follows the
   palette (blue default, warm-brown under .palette-brown). Was a
   hardcoded #1a1714 when brown was the only night family. */
html.dark .token .tooltip {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html.dark .tooltip .pos { color: var(--text-muted); }

html.dark .token .romaji-hint {
  background: var(--surface);
  color: var(--text-muted);
  border-color: var(--border);
}

/* Input fields */
html.dark .input-field,
html.dark .chat-input {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

/* Buttons — general */
html.dark .course-btn {
  border-color: var(--text);
  color: var(--text);
  background: transparent;
}
html.dark .go-button {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
html.dark .go-button:hover {
  background: var(--text-muted);
  border-color: var(--text-muted);
  color: var(--bg);
}

/* Plans page — restrained: accent only for recommended badge and box outline */
html.dark .plan-cta {
  border-color: var(--text);
  color: var(--text);
  background: transparent;
}
html.dark .plan-cta:hover {
  background: var(--text);
  color: var(--bg);
}
html.dark .plan-card.featured .plan-cta {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
html.dark .plan-card.featured .plan-cta:hover {
  background: var(--text-muted);
  border-color: var(--text-muted);
  color: var(--bg);
}

/* Override the light-mode featured CTA styles that set red */
html.dark .plan-section.featured .plan-cta {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
html.dark .plan-section.featured .plan-cta:hover {
  background: var(--text-muted);
  border-color: var(--text-muted);
  color: var(--bg);
}

/* Price badges — light with dark text */
html.dark .plan-price-badge {
  background: var(--text);
  color: var(--bg);
}

/* Plan cards — border is default, featured gets accent */
html.dark .plan-card {
  border-color: var(--border);
}
html.dark .plan-card.featured {
  border-color: var(--accent);
}

/* Checkmarks — white not red */
html.dark .plan-features li::before,
html.dark .feature-list li::before {
  color: var(--text);
}

/* Landing page pricing cards */
html.dark .plan-card {
  border-color: var(--border);
  background: var(--surface);
}
html.dark .plan-card.featured {
  border-color: var(--accent);
}
html.dark .plan-card .plan-price {
  background: var(--text);
  color: var(--bg);
}
html.dark .plan-card .plan-cta {
  border-color: var(--text);
  color: var(--text);
  background: transparent;
}
html.dark .plan-card .plan-cta:hover {
  background: var(--text);
  color: var(--bg);
}
html.dark .plan-card.featured .plan-cta {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
html.dark .plan-card.featured .plan-cta:hover {
  background: var(--text-muted);
  border-color: var(--text-muted);
}

/* Dropdown panel items */
html.dark .hdr-dropdown-btn.open,
html.dark .hdr-dropdown-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
html.dark .dd-item.active {
  color: var(--bg);
  background: var(--accent);
}
html.dark .prof-opt.active {
  background: var(--accent);
  color: var(--bg);
}

/* Register control */
html.dark .register-btn {
  color: var(--text-muted);
  border-color: var(--border);
}
html.dark .register-btn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* Preset chips */
html.dark .preset-chip {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}
html.dark .preset-chip.selected {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: all 0.15s;
  line-height: 1;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Show/hide sun/moon — icon shows the DESTINATION (what tapping switches TO):
   light mode → moon (tap for dark); dark mode → sun (tap for light) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
html.dark .theme-toggle .icon-sun { display: inline; }
html.dark .theme-toggle .icon-moon { display: none; }