/* Standard Light Mode Styles (Default) */
:root {
    --background-color: #f5f5f5;
    --text-color: #363636;
    --primary-color: #00d1b2;  /* Bulma primary */
    --link-color: #3273dc;     /* Bulma link */
    --info-color: #209cee;     /* Bulma info */
    --success-color: #23d160;  /* Bulma success */
    --warning-color: #ffdd57;  /* Bulma warning */
    --danger-color: #ff3860;   /* Bulma danger */

    /* Buttons */
    --button-background-color: var(--primary-color);
    --button-text-color: #fff;

    /* Input and Forms */
    --input-background-color: #fff;
    --input-border-color: #dbdbdb;
    --input-text-color: var(--text-color);

    /* Navbar */
    --navbar-background-color: #f5f5f5;
    --navbar-text-color: var(--text-color);
}
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #121212;
        --text-color: #bbbbbb;
        --primary-color: #44aea4; /* Bulma primary */
        --link-color: #3298dc;    /* Bulma link */
        --info-color: #209cee;    /* Bulma info */
        --success-color: #23d160; /* Bulma success */
        --warning-color: #ffdd57; /* Bulma warning */
        --danger-color: #ff3860;  /* Bulma danger */

        /* Buttons */
        --button-background-color: var(--primary-color);
        --button-text-color: #fff;

        /* Input and Forms */
        --input-background-color: #333;
        --input-border-color: #444;
        --input-text-color: var(--text-color);

        /* Navbar */
        --navbar-background-color: #1a1a1a;
        --navbar-text-color: var(--text-color);
    }
}

[data-theme=dark],
.theme-dark {
    --background-color: #121212;
    --text-color: #bbbbbb;
    --primary-color: #237873;
    --link-color: #3298dc;
    --info-color: #209cee;
    --success-color: #23d160;
    --warning-color: #ffdd57;
    --danger-color: #ff3860;
    --danger-dark-color: #ff3860;

    /* Buttons */
    --button-background-color: var(--primary-color);
    --button-text-color: #fff;

    /* Input and Forms */
    --input-background-color: #333;
    --input-border-color: #444;
    --input-text-color: var(--text-color);

    /* Navbar */
    --navbar-background-color: #1a1a1a;
    --navbar-text-color: var(--text-color);
}

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

.navbar {
    background-color: var(--navbar-background-color);
    color: var(--navbar-text-color);
}

a {
    color: var(--link-color);
}

button, .button {
    background-color: var(--button-background-color);
    color: var(--button-text-color);
}

input {
    background-color: var(--input-background-color);
    border-color: var(--input-border-color);
    color: var(--input-text-color);
}