/* Light theme styles */
:root {
/* Main colors */
    --background-color: #f5f9f8;
    --background-color-bright: #fff;
    --text-color: #333;
    --text-color-bright: #fff;
    --main-color: #00AA87;
    --header-color: #1C2B32;

    /* Button colors */
    --background-button: #007bc7;
    --background-button-hover: #006dba;
    --background-button-blue: #007AD0;
    --background-button-red: #EE3030;
    --background-button-transparent: transparent;
    --background-button-disabled: #E8E8E8;
    --border-button: transparent;
    --border-button-disabled: #E8E8E8;
    --text-button: #FFFFFF;
    --text-button-disabled: #B1B1B1;

    /* Gradient colors */
    --background-color-grad-1: #007ad0;
    --background-color-grad-2: #0c1026;

    /* Header panel colors */
    --header-panel-background-color-grad-1: #007BC7;
    --header-panel-background-color-grad-2: #007BC7;
    --header-panel-text-color: #FFFFFF;

    /* Text colors */
    --text-white: white;
    --text-red: red;
    --text-anchor: #006dba;
    --text-placeholder: white;

    /* Border colors */
    --border-white: white;

    /* Switch colors */
    --switch-track-color: #ccc;
    --switch-thumb-color: #fff;

    /* Background colors */
    --background-color-main: #F2F2F2;

    /* Font sizes */
    --text-font-size: 16px;

    /* Effects */
    --image-brightness: 1;
}

/* Dark theme styles */
[data-theme="theme-mode-dark"] {
    --background-color: #2d2d2d;
    --background-color-bright: #333;
    --text-color: #bbb;
    --header-color: #4E6A78;
    --switch-track-color: #666;
    --switch-thumb-color: #eee;
    --image-brightness: 0.9;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}