/* =============================================================================
   Dark Mode - Dark theme variants for all components
   Automatically applied when user prefers dark color scheme
   ============================================================================= */

@media (prefers-color-scheme: dark) {
  /* ========== OVERRIDES ALREADY IN design-tokens.css ========== */
  /* Note: Base dark mode colors are defined in design-tokens.css
     This file extends with component-specific dark mode adjustments */

  /* ========== TEXT COLORS ========== */
  body {
    color: var(--text-primary);
    background-color: var(--bg-primary);
  }

  /* ========== LINKS ========== */
  a {
    color: #7b92f0;
  }

  a:visited {
    color: #9bb3f5;
  }

  /* ========== CHAPTER & CARDS ========== */
  .chapter {
    background-color: var(--bg-primary);
    border-left-color: #7b92f0;
  }

  .chapter:hover {
    box-shadow: 0 4px 16px rgba(123, 146, 240, 0.2);
  }

  .card {
    background-color: var(--bg-primary);
    border-color: #444;
  }

  .card:hover {
    box-shadow: 0 4px 16px rgba(123, 146, 240, 0.15);
  }

  .card-header {
    border-bottom-color: #444;
  }

  .card-footer {
    border-top-color: #444;
  }

  /* ========== EVIDENCE & QUOTE BOXES ========== */
  .evidence-box {
    background-color: #2a2a2a;
    border-left-color: #7b92f0;
  }

  .evidence-box h4 {
    color: #7b92f0;
  }

  .quote-box {
    background-color: #2a2a2a;
    border-left-color: #ff8787;
  }

  /* ========== BUTTONS ========== */
  button, .button, input[type="button"], input[type="submit"] {
    background-color: #667eea;
    border-color: #667eea;
    color: #ffffff;
  }

  button:hover {
    background-color: #7b92f0;
    border-color: #7b92f0;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
  }

  button:focus-visible {
    outline-color: #7b92f0;
  }

  .button-secondary {
    background-color: transparent;
    border-color: #7b92f0;
    color: #7b92f0;
  }

  .button-secondary:hover {
    background-color: rgba(123, 146, 240, 0.1);
  }

  /* ========== BADGES & TAGS ========== */
  .badge {
    background-color: #333;
    color: #e0e0e0;
  }

  .badge-primary {
    background-color: rgba(123, 146, 240, 0.2);
    color: #7b92f0;
  }

  .badge-critical {
    background-color: rgba(255, 107, 107, 0.2);
    color: #ff8787;
  }

  .event-tag {
    background-color: rgba(123, 146, 240, 0.15);
    color: #7b92f0;
  }

  .event-tag.critical {
    background-color: rgba(255, 107, 107, 0.15);
    color: #ff8787;
  }

  /* ========== ACCORDIONS ========== */
  .accordion-item {
    border-color: #444;
  }

  .accordion-header {
    background-color: #2a2a2a;
    color: #e0e0e0;
  }

  .accordion-header:hover {
    background-color: #333;
  }

  .accordion-header.active {
    background-color: #667eea;
    color: #ffffff;
  }

  .accordion-content {
    background-color: #1a1a1a;
  }

  /* HTML Details/Summary */
  details {
    border-color: #444;
  }

  details[open] {
    background-color: #2a2a2a;
  }

  summary {
    color: #e0e0e0;
  }

  summary:hover {
    color: #7b92f0;
  }

  /* ========== FORM ELEMENTS ========== */
  input, textarea, select {
    background-color: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
  }

  input:focus, textarea:focus, select:focus {
    border-color: #7b92f0;
    background-color: rgba(102, 126, 234, 0.05);
  }

  input::placeholder {
    color: #808080;
  }

  /* ========== CODE BLOCKS ========== */
  code {
    background-color: #2a2a2a;
    color: #ff8787;
  }

  pre {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #444;
  }

  pre code {
    color: #e0e0e0;
  }

  /* ========== TABLES ========== */
  th, td {
    border-bottom-color: #444;
  }

  th {
    background-color: #2a2a2a;
  }

  /* ========== TRIGGER WARNINGS ========== */
  .trigger-warning {
    background-color: rgba(243, 156, 18, 0.1);
    border-color: #d4860a;
  }

  .trigger-warning-icon {
    color: #f39c12;
  }

  .trigger-warning-content h4 {
    color: #f39c12;
  }

  .trigger-warning-content p {
    color: #b0b0b0;
  }

  /* ========== RESOURCES SECTION ========== */
  .resources-section {
    background-color: rgba(123, 146, 240, 0.1);
    border-color: #7b92f0;
  }

  .resources-section h3 {
    color: #7b92f0;
  }

  .resources-section a {
    color: #7b92f0;
  }

  .resources-list li {
    border-bottom-color: rgba(123, 146, 240, 0.2);
  }

  /* ========== MEDIA PLAYER ========== */
  .media-player {
    background-color: #1a1a1a;
  }

  .media-player.media-audio {
    background-color: #2a2a2a;
  }

  .player-controls {
    background-color: #1a1a1a;
    border-top: 1px solid #444;
  }

  .player-btn {
    color: #e0e0e0;
  }

  .player-btn:hover {
    background-color: rgba(123, 146, 240, 0.15);
    color: #7b92f0;
  }

  .player-btn:focus-visible {
    outline-color: #7b92f0;
  }

  .player-time-display {
    color: rgba(224, 224, 224, 0.7);
  }

  .speed-btn {
    background-color: rgba(224, 224, 224, 0.1);
    border-color: rgba(224, 224, 224, 0.2);
    color: #e0e0e0;
  }

  .speed-btn:hover {
    background-color: rgba(224, 224, 224, 0.15);
    border-color: #7b92f0;
    color: #7b92f0;
  }

  .speed-menu {
    background-color: #2a2a2a;
    border-color: #444;
  }

  .speed-option {
    color: rgba(224, 224, 224, 0.7);
  }

  .speed-option:hover {
    background-color: rgba(123, 146, 240, 0.2);
    color: #7b92f0;
  }

  .speed-option.active {
    background-color: rgba(123, 146, 240, 0.3);
    color: #7b92f0;
  }

  .player-meta {
    background-color: #2a2a2a;
    border-top-color: #444;
  }

  .file-info {
    color: #808080;
  }

  .file-info strong {
    color: #e0e0e0;
  }

  .media-expandable > summary {
    background-color: #2a2a2a;
    border-color: #444;
  }

  .media-expandable > summary:hover {
    background-color: #333;
  }

  .media-expandable > div {
    background-color: #1a1a1a;
  }

  .expansion-indicator {
    color: #808080;
  }

  /* ========== LOADING STATES ========== */
  .player-loading {
    background: linear-gradient(
      90deg,
      #2a2a2a 0%,
      #333 50%,
      #2a2a2a 100%
    );
  }

  .player-buffering::after {
    border-color: rgba(123, 146, 240, 0.3);
    border-top-color: #7b92f0;
  }

  /* ========== NAVIGATION BUTTONS ========== */
  .nav-button {
    background-color: transparent;
    border-color: #e0e0e0;
    color: #e0e0e0;
  }

  .nav-button:hover {
    background-color: #667eea;
    border-color: #667eea;
    color: #ffffff;
  }

  /* ========== UTILITY TEXT COLORS ========== */
  .text-success {
    color: #4caf50;
  }

  .text-warning {
    color: #ff9800;
  }

  .text-error {
    color: #f44336;
  }

  .text-critical {
    color: #ff8787;
  }

  .text-info {
    color: #7b92f0;
  }

  /* ========== SCROLLBARS ========== */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }

  ::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #7b92f0;
  }

  /* Firefox scrollbar */
  * {
    scrollbar-color: #667eea #1a1a1a;
    scrollbar-width: thin;
  }

  /* ========== SELECTION ========== */
  ::selection {
    background-color: #667eea;
    color: #ffffff;
  }

  ::-moz-selection {
    background-color: #667eea;
    color: #ffffff;
  }

  /* ========== REDUCED BRIGHTNESS FOR EVENING ========== */
  /* Optional: Reduce brightness by 5% for evening reading */
  @media (prefers-color-scheme: dark) and (light-level: dim) {
    :root {
      --bg-primary: #161616;
      --bg-secondary: #252525;
      --bg-tertiary: #2e2e2e;
    }

    body {
      background-color: #161616;
    }
  }
}

/* ========== FORCED DARK MODE VIA QUERY PARAMETER OR CLASS ========== */
:root[data-theme="dark"] {
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --text-tertiary: #808080;
  --bg-primary: #1a1a1a;
  --bg-secondary: #2a2a2a;
  --bg-tertiary: #333333;
  --color-white: #1a1a1a;
  --color-gray-light: #2a2a2a;
  --color-gray-lighter: #333333;
  --color-gray-lightest: #404040;
  --color-blue-light: #1a3a5c;
  --color-blue-bg: #0d2d48;
  --color-red-light: #3d0a0a;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
}