.btn {
    --color-text: #ffffff;
    --color-bg: #116466; /* Base button color */
    --color-dark-bg: #0f5b5b; /* Slightly darker shade for depth */
    --color-border: #0d4949; /* Darker border for contrast */
    --color-shadow-1: #3f9c9c; /* Lightest shadow for depth */
    --color-shadow-2: #0d5252; /* Medium shadow */
    --color-shadow-3: #178888; /* Slightly darker than main color */

    --color-hover-text: #ffffff;
    --color-hover-bg: #0f5b5b; /* Darker hover effect */
    --color-hover-border: #0a3e3e; /* Even darker for contrast */

    --text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); /* Keeps text readable */
}

.btn[disabled] {
    --color-text: #efefef;
    --color-bg: #939393;
    --color-dark-bg: #939393;
    --color-border: #bfbfbf;
    --color-shadow-1: #939393;
    --color-shadow-2: #7e7e7e;
    --color-shadow-3: #939393;

    --text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.btn.btn-grey {
    --color-text: #404040;
    --color-bg: #f2f2f2;
    --color-dark-bg: #dfdfdf;
    --color-border: #bfbfbf;
    --color-shadow-1: #ffffff;
    --color-shadow-2: #d9d9d9;
    --color-shadow-3: #f2f2f2;

    --color-hover-text: #000000;
    --color-hover-bg: #dfdfdf;
    --color-hover-border: #707070;

    --text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn.btn-yellow {
    --color-text: #404040;
    --color-bg: #fce374;
    --color-dark-bg: #fcdf5b;
    --color-border: #c9ae34;
    --color-shadow-1: #fff6ce;
    --color-shadow-2: #e3c852;
    --color-shadow-3: #fce88d;

    --color-hover-text: #000000;
    --color-hover-bg: #fcdf5b;
    --color-hover-border: #967d09;
}

.btn.btn-blue {
    --color-text: #ffffff;
    --color-bg: #42b0e3;
    --color-dark-bg: #2ba9e3;
    --color-border: #107db0;
    --color-shadow-1: #7cd4fc;
    --color-shadow-2: #2696c9;
    --color-shadow-3: #59b7e3;

    --color-hover-bg: #2ba9e3;
    --color-hover-border: #004c6f;

    --text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.btn.btn-green {
    --color-text: #ffffff;
    --color-bg: #97cc76;
    --color-dark-bg: #8bcc62;
    --color-border: #5f993a;
    --color-shadow-1: #c6e6b3;
    --color-shadow-2: #79b356;
    --color-shadow-3: #a4cc8b;

    --color-hover-bg: #8bcc62;
    --color-hover-border: #326612;
}

.btn.btn-orange {
    --color-text: #ffffff;
    --color-bg: #f58a38;
    --color-dark-bg: #f57c20;
    --color-border: #c25706;
    --color-shadow-1: #ffb984;
    --color-shadow-2: #db6f1d;
    --color-shadow-3: #f59851;

    --color-hover-bg: #f57c20;
    --color-hover-border: #773300;
}

.btn.btn-purple {
    --color-text: #ffffff;
    --color-bg: #847bba;
    --color-dark-bg: #7568ba;
    --color-border: #493e87;
    --color-shadow-1: #bab6d4;
    --color-shadow-2: #655aa1;
    --color-shadow-3: #948dba;

    --color-hover-bg: #7568ba;
    --color-hover-border: #1f1654;
}

.btn.btn-red {
    --color-text: #ffffff;
    --color-bg: #ed6d64;
    --color-dark-bg: #ed574c;
    --color-border: #ba3329;
    --color-shadow-1: #ffb0aa;
    --color-shadow-2: #d44d44;
    --color-shadow-3: #ed837b;

    --color-hover-bg: #ed574c;
    --color-hover-border: #870c03;
}