/* Default Dark Theme */
:root {
    /* Base Colors */
    --bg: #121212;
    --text: #e0e0e0;
    --editor-bg: #1e1e1e;
    --output-bg: #202020;
    --btn-bg: #444;
    --btn-text: #fff;
    --caret: rgb(236, 229, 224);
    --header-bg: #1a1a1a;
    --header-text: #fff;
    --footer-bg: #1c1c1c;
    --footer-text: #fff;
    --line-number-bg: #222;
    --line-number-color: #888;
    --line-number-border: #333;

    /* Dev Panel Colors - Dark Theme */
    --dev-panel-bg: #1a1a1a;
    --dev-panel-bg-secondary: #252525;
    --dev-panel-bg-tertiary: #2d2d2d;
    --dev-panel-text: #e0e0e0;
    --dev-panel-text-secondary: #a0a0a0;
    --dev-panel-border: #333;
    --dev-panel-border-light: #404040;
    --dev-panel-accent: #61dafb;
    --dev-panel-accent-hover: #8be9fd;
    --dev-panel-secondary: #f6c343;
    --dev-panel-success: #4ade80;
    --dev-panel-warning: #f59e0b;
    --dev-panel-error: #ef4444;
    --dev-panel-info: #3b82f6;
    --dev-panel-card-bg: rgba(30, 30, 30, 0.8);
    --dev-panel-card-border: rgba(255, 255, 255, 0.1);
    --dev-panel-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --dev-panel-scrollbar: #444;
    --dev-panel-scrollbar-thumb: #666;
    --dev-panel-metric-bg: rgba(97, 218, 251, 0.1);
    --dev-panel-metric-border: rgba(97, 218, 251, 0.3);
    --dev-panel-hover: rgba(255, 255, 255, 0.05);
    --dev-panel-active: rgba(97, 218, 251, 0.2);

    /* Console Colors for Dark Theme */
    --console-bg: #202020;
    --console-text: #e8eaed;
    --console-border: #3c4043;
    --console-string-color: #9ccc65;
    --console-string-quote-color: #9ccc65;
    --console-number-color: #a8c7fa;
    --console-boolean-color: #a8c7fa;
    --console-null-color: #9aa0a6;
    --console-undefined-color: #9aa0a6;
    --console-function-color: #e8eaed;
    --console-object-color: #e8eaed;
    --console-symbol-color: #a8c7fa;
    --console-default-color: #e8eaed;
    --console-collapsed-color: #9aa0a6;
    --console-property-color: #fdd663;
    --console-bracket-color: #e8eaed;
    --console-expand-color: #e8eaed;
    --console-hover-bg: #3c4043;
    --console-selection-bg: #1a73e8;
    --console-selection-text: #e8eaed;
    --console-selection-border: #1a73e8;
    --console-scrollbar: #444;
    --console-scrollbar-thumb: #666;

    /* Log Output Colors for Dark Theme */
    --log-error-border: #ff6b6b;
    --log-error-bg: #2d0000;
    --log-error-text: #ff6b6b;
    --log-warn-border: #ffd166;
    --log-warn-bg: #332100;
    --log-warn-text: #ffd166;
    --log-info-border: #4ecdc4;
    --log-info-bg: #0a0a0a;
    --log-info-text: #ffffff;
    --log-debug-border: #74c0fc;
    --log-debug-bg: #001a2e;
    --log-debug-text: #74c0fc;
    --log-trace-border: #9775fa;
    --log-trace-bg: #1a0d2e;
    --log-trace-text: #9775fa;
    --log-timestamp-color: #666;
    --log-shadow: rgba(0,0,0,0.2);
    --log-table-border: #333;
    --log-table-bg: #1a1a1a;
    --log-table-header-bg: #2a2a2a;
    --log-table-header-text: #4ecdc4;
    --log-expand-hint: #666;

}

/* Light Theme */
.light-theme {
    /* Base Colors */
    --bg: #ffffff;
    --text: #333;
    --editor-bg: #f0f0f0;
    --output-bg: #f5f5f5;
    --btn-bg: #ddd;
    --btn-text: #000;
    --caret: #222;
    --header-bg: #f7f7f7;
    --header-text: #222;
    --footer-bg: #f0f0f0;
    --footer-text: #222;
    --line-number-bg: #f4f4f4;
    --line-number-color: #aaa;
    --line-number-border: #ddd;

    /* Dev Panel Colors - Light Theme */
    --dev-panel-bg: #ffffff;
    --dev-panel-bg-secondary: #f5f5f5;
    --dev-panel-bg-tertiary: #e5e5e5;
    --dev-panel-text: #1f2937;
    --dev-panel-text-secondary: #6b7280;
    --dev-panel-border: #d1d5db;
    --dev-panel-border-light: #e5e7eb;
    --dev-panel-accent: #0ea5e9;
    --dev-panel-accent-hover: #0c8fd6;
    --dev-panel-secondary: #f59e0b;
    --dev-panel-success: #10b981;
    --dev-panel-warning: #f59e0b;
    --dev-panel-error: #ef4444;
    --dev-panel-info: #3b82f6;
    --dev-panel-card-bg: rgba(255, 255, 255, 0.9);
    --dev-panel-card-border: rgba(0, 0, 0, 0.1);
    --dev-panel-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --dev-panel-scrollbar: #e5e7eb;
    --dev-panel-scrollbar-thumb: #9ca3af;
    --dev-panel-metric-bg: rgba(14, 165, 233, 0.1);
    --dev-panel-metric-border: rgba(14, 165, 233, 0.3);
    --dev-panel-hover: rgba(0, 0, 0, 0.05);
    --dev-panel-active: rgba(14, 165, 233, 0.2);

    /* Console Colors for Light Theme */
    --console-bg: #ffffff;
    --console-text: #333333;
    --console-border: #e0e0e0;
    --console-string-color: #22863a;
    --console-string-quote-color: #22863a;
    --console-number-color: #1c00cf;
    --console-boolean-color: #1c00cf;
    --console-null-color: #808080;
    --console-undefined-color: #808080;
    --console-function-color: #000000;
    --console-object-color: #000000;
    --console-symbol-color: #1c00cf;
    --console-default-color: #333333;
    --console-collapsed-color: #808080;
    --console-property-color: #881391;
    --console-bracket-color: #333333;
    --console-expand-color: #333333;
    --console-hover-bg: #f5f5f5;
    --console-selection-bg: #e3f2fd;
    --console-selection-text: #1c00cf;
    --console-selection-border: #1c00cf;
    --console-scrollbar: #e5e7eb;
    --console-scrollbar-thumb: #9ca3af;

    /* Log Output Colors for Light Theme */
    --log-error-border: #dc2626;
    --log-error-bg: #fef2f2;
    --log-error-text: #dc2626;
    --log-warn-border: #d97706;
    --log-warn-bg: #fffbeb;
    --log-warn-text: #d97706;
    --log-info-border: #0891b2;
    --log-info-bg: #f0f9ff;
    --log-info-text: #0891b2;
    --log-debug-border: #2563eb;
    --log-debug-bg: #eff6ff;
    --log-debug-text: #2563eb;
    --log-trace-border: #7c3aed;
    --log-trace-bg: #f5f3ff;
    --log-trace-text: #7c3aed;
    --log-timestamp-color: #6b7280;
    --log-shadow: rgba(0,0,0,0.1);
    --log-table-border: #e5e7eb;
    --log-table-bg: #ffffff;
    --log-table-header-bg: #f9fafb;
    --log-table-header-text: #0891b2;
    --log-expand-hint: #6b7280;


}

#theme-toggle {
  transition: transform 0.5s ease, background 0.3s, color 0.3s;
  font-size: 1.1rem;
}