/* -- Theme Variables -------------------------------- */
/* Dark mode (default) */
:root {
  --bg-body:            #111111;
  --bg-panel:           rgba(20, 20, 20, 0.97);
  --bg-toolbar:         rgba(18, 18, 18, 0.97);
  --bg-statusbar:       rgba(18, 18, 18, 0.97);
  --bg-hover:           rgba(255, 255, 255, 0.05);
  --bg-selected:        rgba(255, 255, 255, 0.09);
  --bg-upload:          rgba(255, 255, 255, 0.03);
  --bg-upload-hover:    rgba(255, 255, 255, 0.07);
  --bg-slider-track:    rgba(255, 255, 255, 0.12);
  --bg-confirm-box:     #1a1a1a;
  --bg-cancel-btn:      rgba(255, 255, 255, 0.06);
  --bg-cancel-btn-hover:rgba(255, 255, 255, 0.12);
  --bg-meta-row-even:   rgba(255, 255, 255, 0.03);
  --border-subtle:      #252525;
  --border-panel:       #252525;
  --border-btn:         #333333;
  --border-btn-hover:   #555555;
  --border-reset:       #333333;
  --border-reset-hover: #555555;
  --border-confirm:     #2a2a2a;
  --text-primary:       #e0e0e0;
  --text-heading:       #cccccc;
  --text-body:          #aaaaaa;
  --text-secondary:     #bbbbbb;
  --text-muted:         #666666;
  --text-faint:         #444444;
  --text-label:         #999999;
  --text-bright:        #ffffff;
  --accent-green:       #6aaa6a;
  --accent-gold:        #aaaaaa;
  --accent-orange:      #cc8855;
  --accent-yellow:      #cccccc;
  --accent-red:         #cc4444;
  --accent-red-hover:   #aa2222;
  --accent-blue:        #aaaaaa;
  --accent-magenta:     #888888;
  --slider-thumb:       #888888;
  --slider-thumb-hover: #aaaaaa;
  --bg-overlay:         rgba(0, 0, 0, 0.6);
  --shadow-confirm:     0 4px 16px rgba(0, 0, 0, 0.5);
}
/* -- Light Mode Overrides --------------------------- */
body.light-mode {
  --bg-body:            #f5f5f5;
  --bg-panel:           rgba(255, 255, 255, 0.98);
  --bg-toolbar:         rgba(250, 250, 250, 0.98);
  --bg-statusbar:       rgba(250, 250, 250, 0.98);
  --bg-hover:           rgba(0, 0, 0, 0.04);
  --bg-selected:        rgba(0, 0, 0, 0.07);
  --bg-upload:          rgba(0, 0, 0, 0.03);
  --bg-upload-hover:    rgba(0, 0, 0, 0.06);
  --bg-slider-track:    rgba(0, 0, 0, 0.12);
  --bg-confirm-box:     #ffffff;
  --bg-cancel-btn:      rgba(0, 0, 0, 0.05);
  --bg-cancel-btn-hover:rgba(0, 0, 0, 0.1);
  --bg-meta-row-even:   rgba(0, 0, 0, 0.03);
  --border-subtle:      #e0e0e0;
  --border-panel:       #e0e0e0;
  --border-btn:         #d0d0d0;
  --border-btn-hover:   #aaaaaa;
  --border-reset:       #d0d0d0;
  --border-reset-hover: #aaaaaa;
  --border-confirm:     #e0e0e0;
  --text-primary:       #111111;
  --text-heading:       #222222;
  --text-body:          #444444;
  --text-secondary:     #333333;
  --text-muted:         #777777;
  --text-faint:         #aaaaaa;
  --text-label:         #555555;
  --text-bright:        #000000;
  --accent-green:       #3a8a3a;
  --accent-gold:        #555555;
  --accent-orange:      #995522;
  --accent-yellow:      #555555;
  --accent-red:         #bb3333;
  --accent-red-hover:   #993333;
  --accent-blue:        #555555;
  --accent-magenta:     #777777;
  --slider-thumb:       #888888;
  --slider-thumb-hover: #555555;
  --bg-overlay:         rgba(0, 0, 0, 0.2);
  --shadow-confirm:     0 4px 16px rgba(0, 0, 0, 0.1);
}