:root {
    --grey: #e0e0e0;
    --grey-darken: #d1d1d1;
    --grey-lighten: #eee;
    --grey-lighten-2: #f5f5f5;
    --grey-lighten-3: #fafafa;
    --bg: #fff;
    --bg-darken: #fff;
    --font: #424242;
    --font-grey: #757575;
    --bg-gradient: linear-gradient(180deg, #dfe8eb 0%, #feffff 40%, #fff 100%);
    --bg-code: #f5f7ff;
    --bg-opac: rgba(255, 255, 255, 0.8);
    --placeholder: #bdbdbd;
}
.thin-scrollbar::-webkit-scrollbar, 
pre::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.thin-scrollbar::-webkit-scrollbar-track-piece:start, 
pre::-webkit-scrollbar {
    top: 40px;
}

.thin-scrollbar::-webkit-scrollbar-track, 
pre::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 8px;
}
.thin-scrollbar::-webkit-scrollbar-thumb, 
pre::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 8px;
}
.thin-scrollbar::-webkit-scrollbar-thumb:hover, 
pre::-webkit-scrollbar-thumb:hover {
    background: #e0e0e0;
}
.thin-scrollbar::-webkit-scrollbar-corner {
    display: none;
}

[data-theme="dark"], 
.dark-theme {
    --grey: #444444;
    --grey-darken: #444;
    --grey-lighten: #333;
    --grey-lighten-2: #181818;
    --grey-lighten-3: #151515;
    --bg: #222729;
    --bg-darken: #212121;
    --font: #eee;
    --font-grey: #bdbdbd;

    --bg-code: #212121;
    --bg-gradient: linear-gradient(4deg, rgba(38,52,57,1) 0%, rgba(20,23,24,1) 100%);
    --bg-opac: rgba(33, 33, 33, 0.85);
}
[data-theme="dark"] .thin-scrollbar::-webkit-scrollbar-track, 
[data-theme="dark"] pre::-webkit-scrollbar-track, 
.dark-theme .thin-scrollbar::-webkit-scrollbar-track {
    background: #212121;
    border-radius: 8px;
}
[data-theme="dark"] .thin-scrollbar::-webkit-scrollbar-thumb, 
[data-theme="dark"] pre::-webkit-scrollbar-thumb,
.dark-theme .thin-scrollbar::-webkit-scrollbar-thumb {
    background: #424242;
    border-radius: 8px;
}
[data-theme="dark"] .thin-scrollbar::-webkit-scrollbar-thumb:hover, 
[data-theme="dark"] pre::-webkit-scrollbar-thumb:hover,
.dark-theme .thin-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #333;
    transition: background, 0.2s;
}

body {
    background: var(--bg);
}