/* Theme Control Styling */
#themeControl {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

#themeButton {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--toolbar-bg);
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--toolbar-btn-color);
    font-size: 18px;
    transition: all 0.2s ease;
    border: 1px solid var(--toolbar-btn-hover);
}

#themeButton:hover {
    transform: scale(1.05);
    background-color: var(--toolbar-btn-hover);
}

#themePanel {
    display: none;
    position: absolute;
    bottom: 50px;
    right: 0;
    width: 200px;
    background-color: var(--toolbar-bg);
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
    padding: 12px;
    transition: all 0.3s ease;
}

#themePanel h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--toolbar-btn-color);
    text-align: center;
    font-weight: normal;
    font-family: monospace;
}

#themesList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.theme-option {
    padding: 8px 12px;
    margin: 4px 0;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
    font-family: monospace;
    font-size: 12px;
    gap: 0.5rem;
    color: var(--toolbar-btn-color);

}

.theme-option:hover {
    background-color: var(--toolbar-btn-hover);
}

.theme-option.active {
    background-color: var(--toolbar-btn-hover);
    color: var(--toolbar-btn-active);
    font-weight: bold;
}

.theme-color-preview {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Base Theme - Sets Common Properties */
.theme {
    --editor-bg: #ffffff;
    --editor-text: #333333;
    --editor-padding: 20px;
    --toolbar-bg: #f8f9fa;
    --toolbar-btn-color: #555555;
    --toolbar-btn-hover: #e9ecef;
    --toolbar-btn-active: #0d6efd;
    --selection-bg: #d3e3fd;
    --link-color: #0d6efd;
    --page-bg: #ffffff;
    --popup-bg: #ffffff;
    --popup-text: #333333;
    --popup-border: #e9ecef;
    --placeholder-color: #aaa;
    
    /* NEW: Agent Tag and Sidebar Variables */
    --agent-tag-bg: #e0e0e0; 
    --agent-tag-text: #333333; 
    --sidebar-bg: #f8f9fa; 
    --sidebar-border: #e9ecef; 
    --sidebar-header-text: #555555;
    --sidebar-header-border: #dddddd;
    --comment-card-bg: #ffffff;
    --comment-card-border: #e0e0e0;
    --comment-card-text: #555555;
    --comment-card-header-text: #333333;
    --comment-card-status-text: #888888;
    --comment-btn-bg: #e3f2fd;
    --comment-btn-border: #b1d7f8;
    --comment-btn-text: #0d6efd;
    --comment-btn-hover-bg: #d0e8fd;
    --comment-btn-disabled-bg: #e9ecef;
    --comment-btn-disabled-border: #ced4da;
    --comment-btn-disabled-text: #6c757d;

    /* Contribution colors */
    --color-level-0: #ebedf0;
    --color-level-1: #c6e48b;
    --color-level-2: #7bc96f;
    --color-level-3: #239a3b;
    --color-level-4: #196127;
}

/* Light Theme (Default) */
.theme-light {
    --editor-bg: #ffffff;
    --editor-text: #333333;
    --page-bg: #ffffff;
    --selection-bg: #d3e3fd;
    --toolbar-btn-active: #0d6efd;
    --popup-bg: #ffffff;
    --popup-text: #333333;
    --popup-border: #e9ecef;
    --placeholder-color: #aaa;
    
    /* Light Theme Sidebar/Agent Vars */
    --agent-tag-bg: #e0e0e0;
    --agent-tag-text: #333333;
    --sidebar-bg: #f8f9fa;
    --sidebar-border: #e9ecef;
    --sidebar-header-text: #555555;
    --sidebar-header-border: #dddddd;
    --comment-card-bg: #ffffff;
    --comment-card-border: #e0e0e0;
    --comment-card-text: #555555;
    --comment-card-header-text: #333333;
    --comment-card-status-text: #888888;
    --comment-btn-bg: #e3f2fd;
    --comment-btn-border: #b1d7f8;
    --comment-btn-text: #0d6efd;
    --comment-btn-hover-bg: #d0e8fd;
    --comment-btn-disabled-bg: #e9ecef;
    --comment-btn-disabled-border: #ced4da;
    --comment-btn-disabled-text: #6c757d;

    /* Contribution colors - GitHub style */
    --color-level-0: #ebedf0;
    --color-level-1: #c6e48b;
    --color-level-2: #7bc96f;
    --color-level-3: #239a3b;
    --color-level-4: #196127;
}

/* Dark Theme */
.theme-dark {
    --editor-bg: #2d2d2d;
    --editor-text: #e0e0e0;
    --toolbar-bg: #383838;
    --toolbar-btn-color: #cccccc;
    --toolbar-btn-hover: #444444;
    --page-bg: #2d2d2d;
    --selection-bg: #404d64;
    --link-color: #5d9afd;
    --toolbar-btn-active: #5d9afd;
    --popup-bg: #383838;
    --popup-text: #e0e0e0;
    --popup-border: #444444;
    --placeholder-color: #666666;
    
    /* Dark Theme Sidebar/Agent Vars */
    --agent-tag-bg: #4a4a4a; 
    --agent-tag-text: #e0e0e0; 
    --sidebar-bg: #383838; 
    --sidebar-border: #444444; 
    --sidebar-header-text: #cccccc;
    --sidebar-header-border: #555555;
    --comment-card-bg: #2d2d2d;
    --comment-card-border: #4a4a4a;
    --comment-card-text: #cccccc;
    --comment-card-header-text: #e0e0e0;
    --comment-card-status-text: #aaaaaa;
    --comment-btn-bg: #404d64; /* Using selection-bg */
    --comment-btn-border: #5d7091;
    --comment-btn-text: #5d9afd; /* Using link color */
    --comment-btn-hover-bg: #4d5c7a;
    --comment-btn-disabled-bg: #444444;
    --comment-btn-disabled-border: #555555;
    --comment-btn-disabled-text: #777777;

    /* Contribution colors - Dark theme */
    --color-level-0: #333333;
    --color-level-1: #0e4429;
    --color-level-2: #006d32;
    --color-level-3: #26a641;
    --color-level-4: #39d353;
}

/* Sepia Theme */
.theme-sepia {
    --editor-bg: #f8f2e4;
    --editor-text: #5b4636;
    --page-bg: #f8f2e4;
    --toolbar-bg: #f3ead8;
    --toolbar-btn-color: #6b5545;
    --toolbar-btn-hover: #efe5d3;
    --selection-bg: #e6d9bd;
    --link-color: #9a6f38;
    --toolbar-btn-active: #9a6f38;
    --popup-bg: #f8f2e4;
    --popup-text: #5b4636;
    --popup-border: #e6d9bd;
    --placeholder-color: #b5a898;
    
    /* Sepia Theme Sidebar/Agent Vars */
    --agent-tag-bg: #efe5d3; 
    --agent-tag-text: #5b4636; 
    --sidebar-bg: #f3ead8;
    --sidebar-border: #e6d9bd;
    --sidebar-header-text: #6b5545;
    --sidebar-header-border: #d9ba83;
    --comment-card-bg: #f8f2e4;
    --comment-card-border: #efe5d3;
    --comment-card-text: #6b5545;
    --comment-card-header-text: #5b4636;
    --comment-card-status-text: #8c7e70;
    --comment-btn-bg: #e6d9bd; /* Using selection-bg */
    --comment-btn-border: #d9c6a8;
    --comment-btn-text: #9a6f38; /* Using link color */
    --comment-btn-hover-bg: #d9c6a8;
    --comment-btn-disabled-bg: #efe5d3;
    --comment-btn-disabled-border: #e6d9bd;
    --comment-btn-disabled-text: #a19384;

    /* Contribution colors - Sepia theme */
    --color-level-0: #e6d9bd;
    --color-level-1: #d9ba83;
    --color-level-2: #c4a26a;
    --color-level-3: #b08952;
    --color-level-4: #9a6f38;
}

/* Nord Theme */
.theme-nord {
    --editor-bg: #e5e9f0;
    --editor-text: #2e3440;
    --page-bg: #e5e9f0;
    --toolbar-bg: #d8dee9;
    --toolbar-btn-color: #434c5e;
    --toolbar-btn-hover: #c2c8d6;
    --selection-bg: #b1bede;
    --link-color: #5e81ac;
    --toolbar-btn-active: #5e81ac;
    --popup-bg: #e5e9f0;
    --popup-text: #2e3440;
    --popup-border: #c2c8d6;
    --placeholder-color: #8899a9;
    
    /* Nord Theme Sidebar/Agent Vars */
    --agent-tag-bg: #c2c8d6;
    --agent-tag-text: #2e3440;
    --sidebar-bg: #d8dee9;
    --sidebar-border: #c2c8d6;
    --sidebar-header-text: #434c5e;
    --sidebar-header-border: #b1bede;
    --comment-card-bg: #e5e9f0;
    --comment-card-border: #d8dee9;
    --comment-card-text: #434c5e;
    --comment-card-header-text: #2e3440;
    --comment-card-status-text: #6a7a8f;
    --comment-btn-bg: #b1bede; /* Using selection-bg */
    --comment-btn-border: #9eb0d1;
    --comment-btn-text: #5e81ac; /* Using link color */
    --comment-btn-hover-bg: #9eb0d1;
    --comment-btn-disabled-bg: #c2c8d6;
    --comment-btn-disabled-border: #b1bede;
    --comment-btn-disabled-text: #8899a9;

    /* Contribution colors - Nord theme */
    --color-level-0: #d8dee9;
    --color-level-1: #a3be8c;
    --color-level-2: #88c0d0;
    --color-level-3: #5e81ac;
    --color-level-4: #b48ead;
}

/* Solarized Theme */
.theme-solarized {
    --editor-bg: #fdf6e3;
    --editor-text: #657b83;
    --page-bg: #fdf6e3;
    --toolbar-bg: #eee8d5;
    --toolbar-btn-color: #839496;
    --toolbar-btn-hover: #e3dec1;
    --selection-bg: #d4cba7;
    --link-color: #2aa198;
    --toolbar-btn-active: #2aa198;
    --popup-bg: #fdf6e3;
    --popup-text: #657b83;
    --popup-border: #e3dec1;
    --placeholder-color: #a9b5b5;
    
    /* Solarized Theme Sidebar/Agent Vars */
    --agent-tag-bg: #eee8d5;
    --agent-tag-text: #657b83;
    --sidebar-bg: #eee8d5;
    --sidebar-border: #e3dec1;
    --sidebar-header-text: #839496;
    --sidebar-header-border: #d4cba7;
    --comment-card-bg: #fdf6e3;
    --comment-card-border: #eee8d5;
    --comment-card-text: #839496;
    --comment-card-header-text: #657b83;
    --comment-card-status-text: #93a1a1;
    --comment-btn-bg: #d4cba7; /* Using selection-bg */
    --comment-btn-border: #c6bfa0;
    --comment-btn-text: #2aa198; /* Using link color */
    --comment-btn-hover-bg: #c6bfa0;
    --comment-btn-disabled-bg: #e3dec1;
    --comment-btn-disabled-border: #d4cba7;
    --comment-btn-disabled-text: #a9b5b5;

    /* Contribution colors - Solarized theme */
    --color-level-0: #eee8d5;
    --color-level-1: #b58900;
    --color-level-2: #cb4b16;
    --color-level-3: #dc322f;
    --color-level-4: #d33682;
}

/* Apply theme variables to elements */
body.theme {
    background-color: var(--page-bg);
}

#editor.theme {
    background-color: var(--editor-bg);
    color: var(--editor-text);
}

#editor.theme[placeholder]:empty:before {
    color: var(--placeholder-color);
}

#editor.theme::selection, 
#editor.theme *::selection {
    background-color: var(--selection-bg);
}

#toolbar.theme {
    background-color: var(--toolbar-bg);
}

#toolbar.theme button {
    color: var(--toolbar-btn-color);
}

#toolbar.theme button:hover {
    background-color: var(--toolbar-btn-hover);
}

#toolbar.theme button.active {
    color: var(--toolbar-btn-active);
    background-color: var(--toolbar-btn-hover);
    font-weight: bold;
}

#editor.theme a {
    color: var(--link-color);
}

/* Apply theme to link popup */
#linkPopup.theme {
    background-color: var(--popup-bg);
    border: 1px solid var(--popup-border);
    font-family: 'Sono', sans-serif;
}

#linkPopup.theme input {
    background-color: var(--popup-bg);
    color: var(--popup-text);
    border-color: var(--popup-border);
    font-family: 'Sono', sans-serif;
}

#linkPopup.theme button {
    color: var(--toolbar-btn-color);
    font-family: 'Sono', sans-serif;
}

#linkPopup.theme #applyLink {
    color: var(--toolbar-btn-active);
}

/* Dracula Theme */
.theme-dracula {
    --editor-bg: #282a36;
    --editor-text: #f8f8f2;
    --page-bg: #282a36;
    --toolbar-bg: #44475a;
    --toolbar-btn-color: #f8f8f2;
    --toolbar-btn-hover: #6272a4;
    --selection-bg: #44475a;
    --link-color: #8be9fd;
    --toolbar-btn-active: #bd93f9;
    --popup-bg: #44475a;
    --popup-text: #f8f8f2;
    --popup-border: #6272a4;
    --placeholder-color: #6272a4;

    /* Dracula Sidebar/Agent Vars */
    --agent-tag-bg: #6272a4;
    --agent-tag-text: #f8f8f2;
    --sidebar-bg: #44475a;
    --sidebar-border: #6272a4;
    --sidebar-header-text: #f8f8f2;
    --sidebar-header-border: #6272a4;
    --comment-card-bg: #282a36;
    --comment-card-border: #44475a;
    --comment-card-text: #f8f8f2;
    --comment-card-header-text: #f8f8f2;
    --comment-card-status-text: #bd93f9;
    --comment-btn-bg: #44475a;
    --comment-btn-border: #6272a4;
    --comment-btn-text: #8be9fd;
    --comment-btn-hover-bg: #6272a4;
    --comment-btn-disabled-bg: #282a36;
    --comment-btn-disabled-border: #44475a;
    --comment-btn-disabled-text: #6272a4;

    /* Contribution colors - Dracula theme */
    --color-level-0: #44475a;
    --color-level-1: #bd93f9;
    --color-level-2: #ff79c6;
    --color-level-3: #8be9fd;
    --color-level-4: #50fa7b;
}

/* Gruvbox Dark Theme */
.theme-gruvbox-dark {
    --editor-bg: #282828;
    --editor-text: #ebdbb2;
    --page-bg: #282828;
    --toolbar-bg: #3c3836;
    --toolbar-btn-color: #d5c4a1;
    --toolbar-btn-hover: #504945;
    --selection-bg: #504945;
    --link-color: #83a598;
    --toolbar-btn-active: #fabd2f;
    --popup-bg: #3c3836;
    --popup-text: #ebdbb2;
    --popup-border: #504945;
    --placeholder-color: #7c6f64;

    /* Gruvbox Dark Sidebar/Agent Vars */
    --agent-tag-bg: #504945;
    --agent-tag-text: #ebdbb2;
    --sidebar-bg: #3c3836;
    --sidebar-border: #504945;
    --sidebar-header-text: #d5c4a1;
    --sidebar-header-border: #665c54;
    --comment-card-bg: #282828;
    --comment-card-border: #504945;
    --comment-card-text: #d5c4a1;
    --comment-card-header-text: #ebdbb2;
    --comment-card-status-text: #a89984;
    --comment-btn-bg: #504945;
    --comment-btn-border: #665c54;
    --comment-btn-text: #83a598;
    --comment-btn-hover-bg: #665c54;
    --comment-btn-disabled-bg: #3c3836;
    --comment-btn-disabled-border: #504945;
    --comment-btn-disabled-text: #7c6f64;

    /* Contribution colors - Gruvbox Dark theme */
    --color-level-0: #3c3836;
    --color-level-1: #b16286;
    --color-level-2: #8ec07c;
    --color-level-3: #fabd2f;
    --color-level-4: #fe8019;
}

/* High Contrast Theme */
.theme-high-contrast {
    --editor-bg: #000000;
    --editor-text: #ffffff;
    --page-bg: #000000;
    --toolbar-bg: #222222;
    --toolbar-btn-color: #ffffff;
    --toolbar-btn-hover: #444444;
    --selection-bg: #ffff00;
    --link-color: #00ffff;
    --toolbar-btn-active: #00ff00;
    --popup-bg: #222222;
    --popup-text: #ffffff;
    --popup-border: #555555;
    --placeholder-color: #888888;

    /* High Contrast Sidebar/Agent Vars */
    --agent-tag-bg: #555555;
    --agent-tag-text: #ffffff;
    --sidebar-bg: #222222;
    --sidebar-border: #555555;
    --sidebar-header-text: #ffffff;
    --sidebar-header-border: #777777;
    --comment-card-bg: #000000;
    --comment-card-border: #555555;
    --comment-card-text: #ffffff;
    --comment-card-header-text: #ffffff;
    --comment-card-status-text: #dddddd;
    --comment-btn-bg: #444444;
    --comment-btn-border: #666666;
    --comment-btn-text: #00ffff;
    --comment-btn-hover-bg: #666666;
    --comment-btn-disabled-bg: #222222;
    --comment-btn-disabled-border: #444444;
    --comment-btn-disabled-text: #888888;

    /* Contribution colors - High Contrast theme */
    --color-level-0: #222222;
    --color-level-1: #ff00ff;
    --color-level-2: #00ffff;
    --color-level-3: #00ff00;
    --color-level-4: #ffff00;
}

/* Bubblegum Theme */
.theme-bubblegum {
    --editor-bg: #fff0f3;
    --editor-text: #d63384; /* Dark pink text */
    --page-bg: #fff0f3; /* Very light pink page */
    --toolbar-bg: #ffcdd2;
    --toolbar-btn-color: #ad1457;
    --toolbar-btn-hover: #ffb3ba;
    --selection-bg: #ffdde1;
    --link-color: #ec407a;
    --toolbar-btn-active: #c2185b;
    --popup-bg: #ffebef;
    --popup-text: #ad1457;
    --popup-border: #ffcdd2;
    --placeholder-color: #f48fb1;

    /* Bubblegum Sidebar/Agent Vars */
    --agent-tag-bg: #ffdde1;
    --agent-tag-text: #c2185b;
    --sidebar-bg: #ffebef;
    --sidebar-border: #ffcdd2;
    --sidebar-header-text: #ad1457;
    --sidebar-header-border: #ffb3ba;
    --comment-card-bg: #ffffff;
    --comment-card-border: #ffcdd2;
    --comment-card-text: #d63384;
    --comment-card-header-text: #c2185b;
    --comment-card-status-text: #f48fb1;
    --comment-btn-bg: #ffcdd2;
    --comment-btn-border: #ffcdd2;
    --comment-btn-text: #ad1457;
    --comment-btn-hover-bg: #ffb3ba;
    --comment-btn-disabled-bg: #ffebef;
    --comment-btn-disabled-border: #ffdde1;
    --comment-btn-disabled-text: #f48fb1;

    /* Contribution colors - Bubblegum theme */
    --color-level-0: #ffebef;
    --color-level-1: #f8bbd0;
    --color-level-2: #f06292;
    --color-level-3: #ec407a;
    --color-level-4: #d81b60;
}

/* Cloudy Sky Theme */
.theme-cloudy-sky {
    --editor-bg: #4fb3ff;
    --editor-text: #ffffff;
    --page-bg: #4fb3ff; /* Light blue page */
    --toolbar-bg: #2380c2;
    --toolbar-btn-color: #ffffff;
    --toolbar-btn-hover: #0c68a5;
    --selection-bg: #1c8aff;
    --link-color: #c4e7ff;
    --toolbar-btn-active: #ffffff;
    --popup-bg: #4fb3ff;
    --popup-text: #ffffff;
    --popup-border: #2380c2;
    --placeholder-color: #ffffff;

    /* Cloudy Sky Sidebar/Agent Vars */
    --agent-tag-bg: #0c68a5;
    --agent-tag-text: #8dd1ff;
    --sidebar-bg: #4fb3ff;
    --sidebar-border: #2380c2;
    --sidebar-header-text: #ffffff;
    --sidebar-header-border: #2380c2;
    --comment-card-bg: #4fb3ff;
    --comment-card-border: #2380c2;
    --comment-card-text: #ffffff;
    --comment-card-header-text: #ffffff;
    --comment-card-status-text: #ffffff;
    --comment-btn-bg: #2380c2;
    --comment-btn-border: #2380c2;
    --comment-btn-text: #ffffff;
    --comment-btn-hover-bg: #2380c2;
    --comment-btn-disabled-bg: #eaf2f8;
    --comment-btn-disabled-border: #d6eaf8;
    --comment-btn-disabled-text: #a9cce3;

    /* Contribution colors - Cloudy Sky theme */
    --color-level-0: #eaf2f8;
    --color-level-1: #aed6f1;
    --color-level-2: #5dade2;
    --color-level-3: #2e86c1;
    --color-level-4: #1b4f72;
}

/* Forest Green Theme */
.theme-mint-green {
    --editor-bg: #e8f8f5;
    --editor-text: #212f3c;
    --page-bg: #e8f8f5;
    --toolbar-bg: #d4efdf;
    --toolbar-btn-color: #145a32;
    --toolbar-btn-hover: #a9dfbf;
    --selection-bg: #cceee4;
    --link-color: #1e8449;
    --toolbar-btn-active: #117a65;
    --popup-bg: #e8f8f5;
    --popup-text: #212f3c;
    --popup-border: #a9dfbf;
    --placeholder-color: #a3e4d7;

    /* Forest Green Sidebar/Agent Vars */
    --agent-tag-bg: #d4efdf;
    --agent-tag-text: #145a32;
    --sidebar-bg: #e8f8f5;
    --sidebar-border: #d4efdf;
    --sidebar-header-text: #145a32;
    --sidebar-header-border: #a9dfbf;
    --comment-card-bg: #ffffff;
    --comment-card-border: #d4efdf;
    --comment-card-text: #212f3c;
    --comment-card-header-text: #117a65;
    --comment-card-status-text: #73c6b6;
    --comment-btn-bg: #cceee4;
    --comment-btn-border: #a9dfbf;
    --comment-btn-text: #1e8449;
    --comment-btn-hover-bg: #a9dfbf;
    --comment-btn-disabled-bg: #e8f8f5;
    --comment-btn-disabled-border: #d4efdf;
    --comment-btn-disabled-text: #a3e4d7;

    /* Contribution colors - Forest Green theme */
    --color-level-0: #e8f8f5;
    --color-level-1: #a9dfbf;
    --color-level-2: #58d68d;
    --color-level-3: #28b463;
    --color-level-4: #1e8449;
}

/* Dark Crimson Theme */
.theme-dark-crimson {
    --editor-bg: #1e1e1e;
    --editor-text: #e0e0e0;
    --page-bg: #1e1e1e;
    --toolbar-bg: #3c1e1e;
    --toolbar-btn-color: #f5c6c6;
    --toolbar-btn-hover: #5a2e2e;
    --selection-bg: #5a2e2e;
    --link-color: #f08080;
    --toolbar-btn-active: #dc143c;
    --popup-bg: #3c1e1e;
    --popup-text: #e0e0e0;
    --popup-border: #5a2e2e;
    --placeholder-color: #8b4545;

    /* Dark Crimson Sidebar/Agent Vars */
    --agent-tag-bg: #5a2e2e;
    --agent-tag-text: #f5c6c6;
    --sidebar-bg: #3c1e1e;
    --sidebar-border: #5a2e2e;
    --sidebar-header-text: #f5c6c6;
    --sidebar-header-border: #8b4545;
    --comment-card-bg: #1e1e1e;
    --comment-card-border: #5a2e2e;
    --comment-card-text: #e0e0e0;
    --comment-card-header-text: #f5c6c6;
    --comment-card-status-text: #cd5c5c;
    --comment-btn-bg: #5a2e2e;
    --comment-btn-border: #8b4545;
    --comment-btn-text: #f08080;
    --comment-btn-hover-bg: #8b4545;
    --comment-btn-disabled-bg: #3c1e1e;
    --comment-btn-disabled-border: #5a2e2e;
    --comment-btn-disabled-text: #8b4545;

    /* Contribution colors - Dark Crimson theme */
    --color-level-0: #3c1e1e;
    --color-level-1: #8b0000;
    --color-level-2: #dc143c;
    --color-level-3: #ff4500;
    --color-level-4: #ff6347;
}

/* Synthwave Sunset Theme */
.theme-synthwave-sunset {
    --editor-bg: #2a213a;
    --editor-text: #f0f0f0;
    --page-bg: #2a213a;
    --toolbar-bg: #3a3151;
    --toolbar-btn-color: #00f0ff; /* Cyan */
    --toolbar-btn-hover: #4a416a;
    --selection-bg: #4a416a;
    --link-color: #ff00a0; /* Pink */
    --toolbar-btn-active: #ff8000; /* Orange */
    --popup-bg: #3a3151;
    --popup-text: #f0f0f0;
    --popup-border: #4a416a;
    --placeholder-color: #6a6189;

    /* Synthwave Sidebar/Agent Vars */
    --agent-tag-bg: #4a416a;
    --agent-tag-text: #ff00a0; /* Pink */
    --sidebar-bg: #3a3151;
    --sidebar-border: #4a416a;
    --sidebar-header-text: #00f0ff; /* Cyan */
    --sidebar-header-border: #4a416a;
    --comment-card-bg: #2a213a;
    --comment-card-border: #3a3151;
    --comment-card-text: #f0f0f0;
    --comment-card-header-text: #00f0ff; /* Cyan */
    --comment-card-status-text: #ff8000; /* Orange */
    --comment-btn-bg: #4a416a;
    --comment-btn-border: #6a6189;
    --comment-btn-text: #ff00a0; /* Pink */
    --comment-btn-hover-bg: #6a6189;
    --comment-btn-disabled-bg: #3a3151;
    --comment-btn-disabled-border: #4a416a;
    --comment-btn-disabled-text: #6a6189;

    /* Contribution colors - Synthwave theme */
    --color-level-0: #3a3151;
    --color-level-1: #6a0dad; /* Deeper Purple */
    --color-level-2: #ff00a0; /* Pink */
    --color-level-3: #00f0ff; /* Cyan */
    --color-level-4: #ff8000; /* Orange */
}

/* Pumpkin Theme */
/* Orange Theme */
.theme-orange {
    --editor-bg: #fff3e0; /* Very Light Orange/Cream */
    --editor-text: #bf360c; /* Deep Orange/Brown Text */
    --page-bg: #fff3e0;
    --toolbar-bg: #ffcc80; /* Light Orange */
    --toolbar-btn-color: #e65100; /* Dark Orange */
    --toolbar-btn-hover: #ffb74d; /* Lighter Orange */
    --selection-bg: #ffe0b2; /* Pale Orange */
    --link-color: #f57c00; /* Bright Orange */
    --toolbar-btn-active: #e65100; /* Dark Orange */
    --popup-bg: #ffe0b2; 
    --popup-text: #bf360c;
    --popup-border: #ffcc80;
    --placeholder-color: #ffb74d; /* Lighter Orange */
    
    /* Pumpkin Sidebar/Agent Vars */
    /* Orange Sidebar/Agent Vars */
    --agent-tag-bg: #ffcc80; /* Warmer orange */
    --agent-tag-text: #bf360c;
    --sidebar-bg: #ffe0b2; /* Pale orange */
    --sidebar-border: #ffcc80;
    --sidebar-header-text: #e65100; 
    --sidebar-header-border: #ffb74d;
    --comment-card-bg: #fff3e0; 
    --comment-card-border: #ffcc80;
    --comment-card-text: #bf360c;
    --comment-card-header-text: #e65100;
    --comment-card-status-text: #f57c00;
    --comment-btn-bg: #ffcc80; /* Warmer orange */
    --comment-btn-border: #ffb74d; /* Slightly darker orange */
    --comment-btn-text: #e65100;
    --comment-btn-hover-bg: #ffb74d;
    --comment-btn-disabled-bg: #ffe0b2;
    --comment-btn-disabled-border: #ffcc80;
    --comment-btn-disabled-text: #fb8c00;

    /* Contribution colors - Pumpkin theme */
    /* Contribution colors - Orange theme */
    --color-level-0: #ffe0b2;
    --color-level-1: #ffb74d;
    --color-level-2: #ff9800;
    --color-level-3: #fb8c00;
    --color-level-4: #f57c00;
}

/* Lavender Fields Theme */
.theme-lavender-fields {
    --editor-bg: #f3e5f5;
    --editor-text: #4a148c; /* Dark Purple */
    --page-bg: #f3e5f5;
    --toolbar-bg: #e1bee7;
    --toolbar-btn-color: #6a1b9a;
    --toolbar-btn-hover: #ce93d8;
    --selection-bg: #e1bee7;
    --link-color: #8e24aa;
    --toolbar-btn-active: #4a148c;
    --popup-bg: #f3e5f5;
    --popup-text: #4a148c;
    --popup-border: #ce93d8;
    --placeholder-color: #ba68c8;

    /* Lavender Fields Sidebar/Agent Vars */
    --agent-tag-bg: #e1bee7;
    --agent-tag-text: #4a148c;
    --sidebar-bg: #f3e5f5;
    --sidebar-border: #e1bee7;
    --sidebar-header-text: #6a1b9a;
    --sidebar-header-border: #ce93d8;
    --comment-card-bg: #f3e5f5;
    --comment-card-border: #e1bee7;
    --comment-card-text: #6a1b9a;
    --comment-card-header-text: #4a148c;
    --comment-card-status-text: #ab47bc;
    --comment-btn-bg: #e1bee7;
    --comment-btn-border: #ce93d8;
    --comment-btn-text: #8e24aa;
    --comment-btn-hover-bg: #ce93d8;
    --comment-btn-disabled-bg: #f3e5f5;
    --comment-btn-disabled-border: #e1bee7;
    --comment-btn-disabled-text: #ba68c8;

    /* Contribution colors - Lavender Fields theme */
    --color-level-0: #e1bee7;
    --color-level-1: #ba68c8;
    --color-level-2: #9c27b0;
    --color-level-3: #7b1fa2;
    --color-level-4: #4a148c;
}