/* Dark mode: warm, subdued, night-study feel. Activated by adding class="dark" to . Warm tones inspired by the Kyoto night map — lanterns, not neon. */ html.dark { --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; --radius: 6px; } /* Body background */ html.dark body { background: var(--bg); color: var(--text); } /* Tooltips in dark mode stay dark but warmer */ html.dark .token .tooltip { background: #1a1714; color: var(--text); border-color: var(--border); } html.dark .tooltip .pos { color: var(--text-muted); } html.dark .token .romaji-hint { background: #1a1714; 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 current state */ .theme-toggle .icon-sun { display: inline; } .theme-toggle .icon-moon { display: none; } html.dark .theme-toggle .icon-sun { display: none; } html.dark .theme-toggle .icon-moon { display: inline; }