:root {
    --app-color-primary: #218372; /* Primary color */
    --app-color-primary-active: #206c5e; /* Primary color (active state) */
    --app-color-primary-disabled: #498278; /* Primary color (disabled state) */
    --app-color-primary-light: #34d1b6;
    --app-color-primary-opaque-1: #21837205; /* Primary color + 05 (at end) */
    --app-color-primary-opaque-2: #21837215; /* Primary color + 15 (at end) */
    --app-color-primary-opaque-3: #21837225; /* Primary color + 25 (at end) */
    --app-color-primary-opaque-4: #21837235; /* Primary color + 35 (at end) */

    --app-color-secondary: #7a6f6f; /* Secondary color */
    --app-color-secondary-active: #655c5c; /* Secondary color (active state) */
    --app-color-secondary-disabled: #474646; /* Secondary color (disabled state) */
    --app-color-secondary-opaque-1: #7a6f6f10; /* Primary color + 05 (at end) */
    --app-color-secondary-opaque-2: #7a6f6f15; /* Primary color + 15 (at end) */
    --app-color-secondary-opaque-3: #7a6f6f25; /* Primary color + 25 (at end) */
    --app-color-secondary-opaque-4: #7a6f6f35; /* Primary color + 35 (at end) */
}