/* ===========================================
   Simple Slides - CSS Variables & Theming
   =========================================== */

:root {
  /* ---- Light Theme (Default) ---- */

  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #eeeeee;
  --bg-tertiary: #f5f5f5;
  --bg-overlay: rgba(0, 0, 0, 0.73);

  /* Text */
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-muted: #999999;

  /* Borders */
  --border-color: #cccccc;
  --border-light: #dddddd;
  --border-dark: #aaaaaa;

  /* Shadows */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-strong: rgba(0, 0, 0, 0.2);

  /* UI Components */
  --navbar-bg: #eeeeee;
  --navbar-border: #cccccc;
  --resizer-bg: #ccc;
  --modal-bg: #ffffff;

  /* Console */
  --console-bg: #333333;
  --console-text: #ffffff;
  --console-border: #555555;
  --console-toolbar-bg: #2a2a2a;

  /* Progress Bar */
  --progress-bg: #dc3545;
  --progress-fill: #28a745;

  /* Code Editor */
  --editor-bg: #ffffff;
  --editor-gutter: #f7f7f7;
  --editor-cursor: #333333;

  /* Blink Items */
  --blink-border: #cccccc;

  /* Keyboard */
  --kbd-bg: #000000;
  --kbd-text: #ffffff;
}

/* ---- Dark Theme ---- */
[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary: #1e1e1e;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #252526;
  --bg-overlay: rgba(0, 0, 0, 0.85);

  /* Text */
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-muted: #707070;

  /* Borders */
  --border-color: #444444;
  --border-light: #555555;
  --border-dark: #333333;

  /* Shadows */
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-strong: rgba(0, 0, 0, 0.5);

  /* UI Components */
  --navbar-bg: #2d2d2d;
  --navbar-border: #444444;
  --resizer-bg: #3d3d3d;
  --modal-bg: #252526;

  /* Console */
  --console-bg: #1a1a1a;
  --console-text: #e0e0e0;
  --console-border: #444444;
  --console-toolbar-bg: #252526;

  /* Progress Bar - keep same for visibility */
  --progress-bg: #dc3545;
  --progress-fill: #28a745;

  /* Code Editor */
  --editor-bg: #1e1e1e;
  --editor-gutter: #252526;
  --editor-cursor: #ffffff;

  /* Blink Items */
  --blink-border: #555555;

  /* Keyboard */
  --kbd-bg: #444444;
  --kbd-text: #ffffff;
}

/* ---- Dark Theme Overrides for Bootstrap ---- */
[data-theme="dark"] .btn-outline-dark {
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-dark:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

[data-theme="dark"] .progress {
  background-color: var(--bg-tertiary);
}

/* ---- Utility: Smooth Theme Transition ---- */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body,
.slide,
.navbar-code,
.navbar-renderer,
.outer .inner,
.CodeMirror {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}