:root {
    --color-primary: #42829d;
    --color-primary-hover: #5292b1;
    --color-danger: #ef4444;
    --color-danger-bg: #fee2e2;
    --color-warning: #f59e0b;
    --color-folder: #D2B48C;

    --bg-body: #ffffff;
    --bg-secondary: #f3f4f6;
    --bg-panel: #f5f5f5;
    --bg-header: #e0e0e0;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #e0e0e0;
    --bg-selected: #e0e0e0;
    --bg-topbar: #ffffff;
    
    --text-main: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-placeholder: #888888;
    --text-inverted: #ffffff;

    --border-main: #cccccc;
    --border-light: #e5e7eb;
    --border-input: #cccccc;
    --border-focus: #42829d;

    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);
    
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.1);
    
    --tab-bg: #dddddd;
    --tab-active-bg: #ffffff;
    --tab-saved: #10b981;
    --tab-unsaved: #ef4444;
}

html.dark-mode {
    --bg-body: #121212;
    --bg-secondary: #121212;
    --bg-panel: #1e1e1e;
    --bg-header: #252525;
    --bg-card: #2b2b2b;
    --bg-input: #3c3c3c;
    --bg-hover: #333333;
    --bg-selected: #3c3c3c;
    --bg-topbar: #1e1e1e;

    --text-main: #e0e0e0;
    --text-secondary: #aaaaaa;
    --text-muted: #888888;
    --text-placeholder: #bbbbbb;

    --border-main: #333333;
    --border-light: #444444;
    --border-input: #888888;
    
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
    
    --shadow-color: rgba(0, 0, 0, 0.5);
    
    --tab-bg: #333333;
    --tab-active-bg: #444444;
    --tab-saved: #34d399;
    --tab-unsaved: #f87171;
}