.light-theme .CodeMirror {
background-color: #ffffff;
color: #333333;
}

.light-theme .CodeMirror-gutters {
background-color: #f5f5f5;
border-right: 1px solid #e0e0e0;
}

.light-theme .CodeMirror-linenumber {
color: #999999;
}

.light-theme .CodeMirror-cursor {
border-left: 1px solid #000000 !important;
}

.light-theme #search-input {
background-color: #F8F8F7;
color: #333333;
border: 1px solid #e0e0e0;
}

.light-theme #search-button {
background-color: #DED8C4;
color: #333333;
}

.light-theme #search-button:hover {
background-color: #C5BEA4;
}

.light-theme #top-bar {
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
}
.light-theme .toggle-container {
background-color: #ffffff;
border-color: #e0e0e0;
}

.light-theme .toggle-slider {
background-color: #DED8C4;
}

.light-theme .icon-button {
color: #333333;
}

.light-theme #save-button {
color: #333333;
}

.light-theme #fullscreen-button {
color: #333333;
}

.light-theme .CodeMirror-vscrollbar::-webkit-scrollbar {
width: 12px;
}

.light-theme .CodeMirror-vscrollbar::-webkit-scrollbar-track {
background: #F8F8F7;
}

.light-theme .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
background-color: #DED8C4;
border-radius: 6px;
border: 3px solid #F8F8F7;
}

.light-theme .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover {
background-color: #C5BEA4;
}

.light-theme .CodeMirror-vscrollbar {
scrollbar-width: thin;
scrollbar-color: #DED8C4 #F8F8F7;
}
.light-theme .icon-button:hover {
background-color: rgba(222, 216, 196, 0.3);
}

.light-theme #save-button:hover {
background-color: rgba(222, 216, 196, 0.3);
}

.light-theme #theme-toggle:hover {
background-color: rgba(222, 216, 196, 0.3);
}

.light-theme #fullscreen-button:hover {
background-color: rgba(222, 216, 196, 0.3);
}

.light-theme .search-count {
color: #22863A;
}

.light-theme #app-footer {
background-color: #F8F8F7;
color: #333333;
border-top: 1px solid #e0e0e0;
}

.light-theme #app-footer a {
color: #333333;
}

.light-theme #app-footer a:hover {
color: #22863A;
}

/* Light theme syntax highlighting */
.light-theme .cm-s-custom .cm-comment { color: #6A737D; }
.light-theme .cm-s-custom .cm-punctuation { color: #24292E; }
.light-theme .cm-s-custom .cm-tag,
.light-theme .cm-s-custom .cm-boolean,
.light-theme .cm-s-custom .cm-constant,
.light-theme .cm-s-custom .cm-symbol,
.light-theme .cm-s-custom .cm-deleted { color: #D73A49; }
.light-theme .cm-s-custom .cm-selector,
.light-theme .cm-s-custom .cm-string,
.light-theme .cm-s-custom .cm-char,
.light-theme .cm-s-custom .cm-builtin,
.light-theme .cm-s-custom .cm-qualifier,
.light-theme .cm-s-custom .cm-inserted { color: #22863A; }
.light-theme .cm-s-custom .cm-operator,
.light-theme .cm-s-custom .cm-entity,
.light-theme .cm-s-custom .cm-url,
.light-theme .cm-s-custom .language-css .cm-string,
.light-theme .cm-s-custom .cm-variable,
.light-theme .cm-s-custom .cm-variable-2,
.light-theme .style .cm-string { color: #24292E; }
.light-theme .cm-s-custom .cm-atrule,
.light-theme .cm-s-custom .cm-keyword { color: #D73A49; }
.light-theme .cm-s-custom .cm-function,
.light-theme .cm-s-custom .cm-property,
.light-theme .cm-s-custom .cm-def { color: #005CC5; }

/* Light theme selection color */
.light-theme .CodeMirror-selected {
background-color: rgba(241, 239, 231, 0.8) !important; /* Slightly higher opacity for light theme */
}

.light-theme .CodeMirror-focused .CodeMirror-selected {
background-color: rgba(241, 239, 231, 0.8) !important;
}

.light-theme .CodeMirror-line::selection,
.light-theme .CodeMirror-line > span::selection,
.light-theme .CodeMirror-line > span > span::selection {
background-color: rgba(241, 239, 231, 0.8) !important;
}

.light-theme .CodeMirror-line::-moz-selection,
.light-theme .CodeMirror-line > span::-moz-selection,
.light-theme .CodeMirror-line > span > span::-moz-selection {
background-color: rgba(241, 239, 231, 0.8) !important;
}

/* Light theme overrides */
body.light-theme {
background-color: #F1EFE7;
}

.light-theme .icon-button {
color: #333333;
}

.light-theme .icon-button:hover {
background-color: rgba(222, 216, 196, 0.3);
}