/* ============================================
   Dark Mode Overrides
   ============================================ */

[data-theme="dark"] {
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-tertiary: #334155;
  --bg-card: #1E293B;
  --bg-card-hover: #283548;

  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --text-inverse: #0F172A;

  --border-color: #334155;
  --border-light: #1E293B;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.35);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-card-hover: 0 10px 25px -5px rgba(37, 99, 235, 0.2), 0 4px 10px -3px rgba(0,0,0,0.3);

  --primary-bg: rgba(37, 99, 235, 0.15);
}

[data-theme="dark"] .site-header {
  background: rgba(15, 23, 42, 0.9);
  border-bottom-color: #1E293B;
}

[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, rgba(37, 99, 235, 0.08) 100%);
}

[data-theme="dark"] .code-block {
  background: #0F172A;
  border: 1px solid #334155;
}

[data-theme="dark"] .tool-textarea {
  background: #0F172A;
  border-color: #334155;
}

[data-theme="dark"] .tool-textarea.output {
  background: #0F172A;
}

[data-theme="dark"] .key {
  background: #334155;
  border-color: #475569;
  color: #CBD5E1;
}

[data-theme="dark"] .key.pressed {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

[data-theme="dark"] .key.was-pressed {
  background: rgba(37, 99, 235, 0.2);
  border-color: var(--primary-light);
  color: var(--primary-light);
}

[data-theme="dark"] .site-footer {
  background: #020617;
}

[data-theme="dark"] .cta-section {
  background: linear-gradient(135deg, #1E40AF, #1D4ED8);
}

[data-theme="dark"] .drop-zone {
  background: #0F172A;
  border-color: #475569;
}

[data-theme="dark"] .drop-zone:hover,
[data-theme="dark"] .drop-zone.drag-over {
  background: rgba(37, 99, 235, 0.1);
  border-color: var(--primary);
}

[data-theme="dark"] .qr-output canvas,
[data-theme="dark"] .qr-output img {
  border-color: #334155;
}

[data-theme="dark"] .typing-text-display {
  background: #0F172A;
  border-color: #334155;
}

[data-theme="dark"] .option-card:hover {
  background: rgba(37, 99, 235, 0.1);
}

[data-theme="dark"] .option-card.active {
  background: rgba(37, 99, 235, 0.15);
}