:root {
    --bg-gradient-start: #ffffff;
    --bg-gradient-end: #f9f9f9;
    --text-color: #222;
    --header-bg: #f5f5f5;
    --header-text-color: #1d3557;
    --card-bg: #ffffff;
    --card-shadow: rgba(0, 0, 0, 0.08);
    --sidebar-button-bg: #f0f0f0;
    --sidebar-button-border: #ccc;
    --sidebar-button-text: #1d3557;
    --markdown-header-color: #1d3557;
    --markdown-text-color: #444;
    --markdown-code-bg: #f3f3f3;
    --markdown-table-header-bg: #ececec;
    --markdown-table-border: #ccc;
    --hr-color: #eee;
    --menu-bg: #1d3557;
    --menu-text: white;
    --button-bg: #1d3557;
    --button-text: white;
    --active-button-bg: #e63946;
    --active-button-border: #e63946;
    --hover-color: #e63946;
}

body.dark-mode {
    --bg-gradient-start: #1c1c1c;
    --bg-gradient-end: #2c2c2c;
    --text-color: #f0f0f0;
    --header-bg: #2a2a2a;
    --header-text-color: #e63946;
    --card-bg: #2f2f2f;
    --card-shadow: rgba(0, 0, 0, 0.3);
    --sidebar-button-bg: #393939;
    --sidebar-button-border: #555;
    --sidebar-button-text: #e63946;
    --markdown-header-color: #e63946;
    --markdown-text-color: #ddd;
    --markdown-code-bg: #444;
    --markdown-table-header-bg: #3c3c3c;
    --markdown-table-border: #555;
    --hr-color: #444;
    --menu-bg: #e63946;
    --menu-text: #fff;
    --button-bg: #e63946;
    --button-text: #fff;
    --active-button-bg: #1d3557;
    --active-button-border: #1d3557;
    --hover-color: #1d3557;
}