/* ==========================================================================
   Wortschatz B1 - Theme Stylesheet (Dark & Light Mode)
   ========================================================================== */

/* Dark Mode Palette - Engineered for eye comfort during long study sessions */
[data-theme="dark"] {
  --bg-primary: #0b0f19;       /* Deep slate-charcoal */
  --bg-secondary: #131b2e;     /* Rich indigo-slate card background */
  --bg-tertiary: #1e293b;      /* Hover / Secondary background */
  --bg-elevated: #1e293b;

  --text-primary: #f8fafc;     /* Soft warm white */
  --text-secondary: #94a3b8;   /* Muted slate */
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  --border-color: #27354f;
  --border-focus: #60a5fa;

  --brand-primary: #3b82f6;
  --brand-secondary: #60a5fa;
  --brand-gradient: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  --brand-surface: rgba(59, 130, 246, 0.15);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.15);
  --success-border: #059669;

  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.15);
  --danger-border: #dc2626;

  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.15);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .streak-pill {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

[data-theme="dark"] .category-tab-btn:hover {
  background: #1e293b;
}

[data-theme="dark"] .category-tab-btn.active {
  background: var(--brand-gradient);
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 4px 14px rgba(30, 58, 138, 0.5);
}

[data-theme="dark"] .word-de.blurred,
[data-theme="dark"] .word-ar.blurred {
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

[data-theme="dark"] .vocab-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .vocab-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

[data-theme="dark"] .modal-content {
  background: #131b2e;
  border-color: #27354f;
}