/* Japanese Learning System - Dark Theme Overrides */

/* Dark mode: WCAG AA compliant contrast ratios (4.5:1 minimum) */
/* Background #1a1a2e with text #e0e0e0 = ~11.3:1 contrast */
/* Primary #60a5fa on #1a1a2e = ~6.8:1 contrast */
/* Accent #a78bfa on #1a1a2e = ~6.2:1 contrast */

[data-theme="dark"] {
  --bg: #16161f;
  --text: #e0e0e0;
  --primary: #60a5fa;
  --accent: #a78bfa;
  --surface: #23233a;
  --card-bg: #1f1f33;
  --border: #3d3d5c;

  --text-secondary: #a1a1b5;
  --primary-hover: #93c5fd;
  --accent-hover: #c4b5fd;
  --success: #34d399;
  --error: #f87171;
  --warning: #fbbf24;

  /* Accent palette lightened slightly for contrast on dark surfaces */
  --vermilion: #ff7a5c;
  --indigo: #7c8dff;
  --sakura: #f7a1c4;
  --gold: #f4b942;
  --matcha: #4fc3b3;

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* New-page surfaces and gamification adapt to dark mode */
[data-theme="dark"] .heatmap__cell { background: #2c2c46; }
[data-theme="dark"] .heatmap__cell--l1 { background: rgba(124, 141, 255, 0.35); }
[data-theme="dark"] .heatmap__cell--l2 { background: rgba(124, 141, 255, 0.55); }
[data-theme="dark"] .heatmap__cell--l3 { background: rgba(124, 141, 255, 0.78); }
[data-theme="dark"] .heatmap__cell--l4 { background: rgba(124, 141, 255, 1); }
[data-theme="dark"] .vocab-art { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .audio-notice { background: rgba(234, 179, 8, 0.10); }

/* Stroke-order viewer surfaces on dark */
[data-theme="dark"] .strokes__stage { background: var(--card-bg); }
[data-theme="dark"] .strokes__grid { stroke: rgba(200, 200, 220, 0.22); }

/* Keep the brand logo (dark ink) legible on the dark footer */
[data-theme="dark"] .app-footer { background: var(--card-bg); }
[data-theme="dark"] .app-footer__logo {
  background: #f5f6f8;
  border-radius: 10px;
  padding: 6px 12px;
}

/* Dark mode specific adjustments */
[data-theme="dark"] a {
  color: var(--primary);
}

[data-theme="dark"] a:hover {
  color: var(--primary-hover);
}

[data-theme="dark"] .btn {
  color: #1a1a2e;
  background-color: var(--primary);
}

[data-theme="dark"] .btn:hover {
  background-color: var(--primary-hover);
  color: #1a1a2e;
}

[data-theme="dark"] .btn--secondary {
  background-color: transparent;
  color: var(--primary);
  border-color: var(--border);
}

[data-theme="dark"] .btn--secondary:hover {
  background-color: var(--surface);
  color: var(--primary-hover);
}

[data-theme="dark"] .btn--accent {
  background-color: var(--accent);
  color: #1a1a2e;
}

[data-theme="dark"] .btn--accent:hover {
  background-color: var(--accent-hover);
}

[data-theme="dark"] .btn--danger {
  background-color: var(--error);
  color: #1a1a2e;
}

[data-theme="dark"] .input {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .input::placeholder {
  color: var(--text-secondary);
}

[data-theme="dark"] .toast {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

[data-theme="dark"] .loading--overlay {
  background-color: rgba(26, 26, 46, 0.85);
}

[data-theme="dark"] .loading::before {
  border-color: var(--border);
  border-top-color: var(--primary);
}