/* Dark Theme */
[data-theme="dark"] {
    /* Dark Theme Colors */
    --bg-primary: #1e1e1e;
    --bg-secondary: #252526;
    --bg-code: #2d2d2d;
    --text-primary: #d4d4d4;
    --text-secondary: #858585;
    --border-color: #3e3e42;
    --border-focus: #007acc;
    
    /* Status Colors - Adjusted for dark theme */
    --success: #4ec9b0;
    --error: #f48771;
    --warning: #dcdcaa;
    --info: #4fc1ff;
    
    /* Button Colors */
    --btn-primary: #0e639c;
    --btn-primary-hover: #1177bb;
    --btn-secondary: #3e3e42;
    --btn-secondary-hover: #4e4e52;
    
    /* Syntax Highlighting - VS Code Dark+ theme inspired */
    --json-key: #9cdcfe;
    --json-string: #ce9178;
    --json-number: #b5cea8;
    --json-boolean: #569cd6;
    --json-null: #858585;
}

/* Dark Theme Specific Adjustments */
[data-theme="dark"] body {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .panel {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .secondary-btn {
    background: var(--bg-code);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .secondary-btn:hover {
    background: var(--btn-secondary-hover);
}

[data-theme="dark"] select {
    background: var(--bg-code);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .icon-btn {
    background: var(--bg-code);
    border-color: var(--border-color);
}

[data-theme="dark"] .icon-btn:hover {
    background: var(--btn-secondary-hover);
}

[data-theme="dark"] .toast {
    background: var(--bg-code);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .toast.success {
    background: rgba(78, 201, 176, 0.2);
    color: var(--success);
    border-color: var(--success);
}

[data-theme="dark"] .toast.error {
    background: rgba(244, 135, 113, 0.2);
    color: var(--error);
    border-color: var(--error);
}

/* Theme transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.panel,
.code-area,
.panel-header,
.input-info,
button,
select {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}