:root {
    --bg-color: #f4f4f9;
    --grid-color: #e0e0e0;
    --header-bg: #ffffff;
    --text-color: #333333;
    --accent-color: #007acc;
    --accent-hover: #005fa3;
    --note-bg: #ffffff;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --header-height: 50px;
    --ink-color: #333333; 
    --code-bg: #fafafa;
    --code-text: #333333;
    --code-line-num: #b0b0b0;
    --code-line-bg: #f0f0f0;
    --kw-color: #0000ff; --str-color: #a31515; --def-color: #795e26; --comment-color: #008000;
    --sb-track: #f0f0f0; --sb-thumb: #c1c1c1; --sb-thumb-hover: #a8a8a8;
}

body.dark-mode {
    --bg-color: #121212; --grid-color: #1f1f1f; --header-bg: #181818;
    --text-color: #e0e0e0; --accent-color: #4da6ff; --accent-hover: #007acc;
    --note-bg: #1e1e1e; --shadow: 0 4px 12px rgba(0, 0, 0, 0.6); --ink-color: #eeeeee; 
    --code-bg: #181818; --code-text: #d4d4d4; --code-line-num: #454545; --code-line-bg: #1f1f1f;
    --kw-color: #569cd6; --str-color: #ce9178; --def-color: #9cdcfe; --comment-color: #6a9955;
    --sb-track: #1e1e1e; --sb-thumb: #424242; --sb-thumb-hover: #4f4f4f;
}

body.midnight-mode {
    --bg-color: #0f172a; --grid-color: #1e293b; --header-bg: #1e293b;
    --text-color: #f1f5f9; --accent-color: #38bdf8; --accent-hover: #0284c7;
    --note-bg: #1e293b; --shadow: 0 4px 15px rgba(0, 0, 0, 0.5); --ink-color: #f0f9ff;
    --code-bg: #1e293b; --code-text: #e2e8f0; --code-line-num: #475569; --code-line-bg: #0f172a;
    --kw-color: #93c5fd; --str-color: #fda4af; --def-color: #7dd3fc; --comment-color: #94a3b8;
    --sb-track: #0f172a; --sb-thumb: #334155; --sb-thumb-hover: #475569;
}