/* Dark Gray */
:root {
    --primary-color: #008CCF;
    --primary-hover-color: #00AFF0;
    --text-active-color: #FFFFFF;
    --text-none-active-color: #DCE1EA;
    --color: #283C55;
    --background-color: #F5F5F5;
    --box-color: #FFFFFF;
    --total-background-color: #00AFF0;
    --total-color: #FFFFFF;
    --image-color: brightness(0) invert(1);
    --button-color: var(--primary-color);
    --button-hover-color: var(--primary-hover-color);
}

/* orange theme */
.orange-theme {
    --primary-color: #FF6F00;
    --primary-hover-color: #FF8C33;
    --text-active-color: #FFFFFF;
    --text-none-active-color: #F5CBA7;
    --color: #283C55;
    --background-color: #FFF5E6;
    --box-color: #FFFFFF;
    --total-background-color: #ff9b4e;
    --total-color: #FFFFFF;
    --image-color: brightness(0) invert(1);
    --button-color: var(--primary-color);
    --button-hover-color: var(--primary-hover-color);
}

.blue-theme {
    --primary-color: #008CCF;
    --primary-hover-color: #00AFF0;
    --text-active-color: #FFFFFF;
    --text-none-active-color: #DCE1EA;
    --color: #283C55;
    --background-color: #F5F5F5;
    --box-color: #FFFFFF;
    --total-background-color: #00AFF0;
    --total-color: #FFFFFF;
    --image-color: brightness(0) invert(1);
    --button-color: var(--primary-color);
    --button-hover-color: var(--primary-hover-color);
}

.yellow-theme {
    --primary-color: #FFC300;
    --primary-hover-color: #FFD700;
    --text-active-color: #0c0c0c;
    --text-none-active-color: #7a8998;
    --color: #333333;
    --background-color: #FFF9E6;
    --box-color: #FFFFFF;
    --total-background-color: #fce041;
    --total-color: #333333;
    --image-color: brightness(1) invert(0);
    --button-color: var(--primary-color);
    --button-hover-color: var(--primary-hover-color);
}

.pink-theme {
    --primary-color: #E91E63;              /* Main pink */
    --primary-hover-color: #F06292;        /* Lighter pink hover */
    --text-active-color: #FFFFFF;          /* White text for active elements */
    --text-none-active-color: #F8BBD0;     /* Soft pink for inactive text */
    --color: #4A0D2C;                      /* Dark pink/burgundy text */
    --background-color: #FDEDF4;           /* Light pink background */
    --box-color: #FFFFFF;                  /* White box */
    --total-background-color: #F06292;     /* Accent pink background */
    --total-color: #FFFFFF;                /* White text on totals */
    --image-color: brightness(0) invert(1);/* Keep images white */
    --button-color: var(--primary-color);  /* Button base */
    --button-hover-color: var(--primary-hover-color); /* Button hover */
}

.dark-gray-theme {
    --primary-color: #555555;
    --primary-hover-color: #757377;
    --text-active-color: #FFFFFF;
    --text-none-active-color: #a09e9e;
    --color: #283C55;
    --background-color: #E0E0E0;
    --box-color: #FFFFFF;
    --total-background-color: #757377;
    --total-color: #FFFFFF;
    --image-color: brightness(0) invert(1);
    --button-color: var(--primary-color);
    --button-hover-color: var(--primary-hover-color);
}