/* CSS Variables for Themes */
:root {
  /* Default Light Mode */
  --bg-color: #ffffff;
  --tab-container-bg: #e8e8e8;
  --border-color: #ccc;
  --tab-bg: #f0f0f0;
  --tab-text: #444;
  --tab-active-bg: #ffffff;
  --tab-active-text: #000;
  --tab-hover-bg: #e2e2e2;
  --close-color: #777;
  --close-hover-bg: #ccc;
  --close-hover-color: #000;
  --close-active-hover-bg: #e5e5e5;
  --btn-color: #555;
  --btn-hover-bg: #d4d4d4;
  --editor-bg: #fff;
  --editor-text: #000;
  --status-bg: #f3f3f3;
  --status-border: #d9d9d9;
  --status-text: #555;
  --action-bg: #e1e1e1;
  --action-border: #adadad;
  --action-text: #333;
  --action-hover-bg: #e5f1fb;
  --action-hover-border: #0078d7;
  --action-hover-text: #000;
  --modal-bg: #ffffff;
  --modal-overlay: rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] {
  --bg-color: #1e1e1e;
  --tab-container-bg: #252526;
  --border-color: #333;
  --tab-bg: #2d2d2d;
  --tab-text: #969696;
  --tab-active-bg: #1e1e1e;
  --tab-active-text: #ffffff;
  --tab-hover-bg: #333333;
  --close-color: #969696;
  --close-hover-bg: #444;
  --close-hover-color: #fff;
  --close-active-hover-bg: #333;
  --btn-color: #969696;
  --btn-hover-bg: #444;
  --editor-bg: #1e1e1e;
  --editor-text: #d4d4d4;
  --status-bg: #007acc;
  --status-border: #007acc;
  --status-text: #ffffff;
  --action-bg: #1e1e1e;
  --action-border: #ffffff;
  --action-text: #ffffff;
  --action-hover-bg: #ffffff;
  --action-hover-border: #ffffff;
  --action-hover-text: #000000;
  --modal-bg: #1e1e1e;
  --modal-overlay: rgba(0, 0, 0, 0.6);
}

[data-theme="sakura"] {
  --bg-color: #ffe6ea;
  --tab-container-bg: #ffcdd2;
  --border-color: #ffb6c1;
  --tab-bg: #ffcdd2;
  --tab-text: #880e4f;
  --tab-active-bg: #fff0f5;
  --tab-active-text: #4a0024;
  --tab-hover-bg: #f8bbd0;
  --close-color: #c2185b;
  --close-hover-bg: #f48fb1;
  --close-hover-color: #fff;
  --close-active-hover-bg: #ffb6c1;
  --btn-color: #c2185b;
  --btn-hover-bg: #f8bbd0;
  --editor-bg: #fff0f5;
  --editor-text: #560027;
  --status-bg: #f48fb1;
  --status-border: #f06292;
  --status-text: #4a0024;
  --action-bg: #f8bbd0;
  --action-border: #f06292;
  --action-text: #880e4f;
  --action-hover-bg: #f48fb1;
  --action-hover-border: #e91e63;
  --action-hover-text: #fff;
  --modal-bg: #fff0f5;
  --modal-overlay: rgba(136, 14, 79, 0.3);
}