/* ============================================================
   IMAGE COMPRESSOR & OPTIMIZER — Themes Stylesheet (themes.css)
   Dark Mode & High Contrast Themes (Section 36)
   ============================================================ */

/* Dark Mode Theme Definition */
[data-theme="dark"] {
  /* Dark Theme Surfaces & Borders (Section 4 & 36) */
  --bg: #0F172A;
  --surface: #111827;
  --surface-secondary: #1E293B;
  --border: #334155;
  --border-focus: #38BDF8;

  /* Dark Theme Typography */
  --text: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;

  /* Primary Brand Adjustments */
  --primary: #4F8DF7;
  --primary-hover: #3D7FEA;
  --primary-active: #326FD5;
  --primary-dark: #2563EB;
  --primary-light: rgba(79, 141, 247, 0.2);

  /* Shadows for Dark Mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.5);

  /* Status Colors Dark Mode */
  --success: #22C55E;
  --success-bg: rgba(34, 197, 94, 0.15);
  --warning: #FBBF24;
  --warning-bg: rgba(245, 158, 11, 0.15);
  --error: #EF4444;
  --error-bg: rgba(239, 68, 68, 0.15);
  --info: #38BDF8;
  --info-bg: rgba(56, 189, 248, 0.15);
}

/* System Theme Auto-Detection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F172A;
    --surface: #111827;
    --surface-secondary: #1E293B;
    --border: #334155;
    --border-focus: #38BDF8;
    --text: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --primary: #4F8DF7;
    --primary-light: rgba(79, 141, 247, 0.2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
    --success: #22C55E;
    --success-bg: rgba(34, 197, 94, 0.15);
    --warning: #FBBF24;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --error: #EF4444;
    --error-bg: rgba(239, 68, 68, 0.15);
    --info: #38BDF8;
    --info-bg: rgba(56, 189, 248, 0.15);
  }
}

/* Specific Dark Mode Refinements */
[data-theme="dark"] .tool-badge-new {
  background-color: rgba(79, 141, 247, 0.2);
  color: #93C5FD;
  border-color: rgba(79, 141, 247, 0.4);
}

[data-theme="dark"] .notice-warning {
  background-color: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: #FCD34D;
}

[data-theme="dark"] .notice-info {
  background-color: rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.3);
  color: #7DD3FC;
}

[data-theme="dark"] .form-select option {
  background-color: #111827;
  color: #F8FAFC;
}

[data-theme="dark"] .form-range,
:root:not([data-theme="light"]) .form-range {
  background: #334155;
}

[data-theme="dark"] .form-range::-webkit-slider-runnable-track,
:root:not([data-theme="light"]) .form-range::-webkit-slider-runnable-track {
  background: #334155;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .form-range::-moz-range-track,
:root:not([data-theme="light"]) .form-range::-moz-range-track {
  background: #334155;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .form-range::-webkit-slider-thumb,
:root:not([data-theme="light"]) .form-range::-webkit-slider-thumb {
  background: #4F8DF7;
  box-shadow: 0 2px 10px rgba(79, 141, 247, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .form-range::-moz-range-thumb,
:root:not([data-theme="light"]) .form-range::-moz-range-thumb {
  background: #4F8DF7;
  box-shadow: 0 2px 10px rgba(79, 141, 247, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* Theme Toggle Button Icon */
.theme-toggle-btn svg.icon-moon {
  display: block;
}
.theme-toggle-btn svg.icon-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle-btn svg.icon-moon {
  display: none;
}
[data-theme="dark"] .theme-toggle-btn svg.icon-sun {
  display: block;
}