/** Base colors */
--clr-dark-a0: #14172a;
--clr-light-a0: #ffffff;

/** Theme primary colors */
--clr-primary-a0: #1fb568;
--clr-primary-a10: #49be78;
--clr-primary-a20: #65c688;
--clr-primary-a30: #7ecf99;
--clr-primary-a40: #95d7a9;
--clr-primary-a50: #abdfba;

/** Theme surface colors */
--clr-surface-a0: #14172a;
--clr-surface-a10: #2a2c3e;
--clr-surface-a20: #414354;
--clr-surface-a30: #5a5b6a;
--clr-surface-a40: #737481;
--clr-surface-a50: #8d8e99;

/** Theme tonal surface colors */
--clr-surface-tonal-a0: #1a2530;
--clr-surface-tonal-a10: #303944;
--clr-surface-tonal-a20: #464f59;
--clr-surface-tonal-a30: #5e666e;
--clr-surface-tonal-a40: #777d85;
--clr-surface-tonal-a50: #91969c;

/** Success colors */
--clr-success-a0: #22946e;
--clr-success-a10: #47d5a6;
--clr-success-a20: #9ae8ce;

/** Warning colors */
--clr-warning-a0: #a87a2a;
--clr-warning-a10: #d7ac61;
--clr-warning-a20: #ecd7b2;

/** Danger colors */
--clr-danger-a0: #9c2121;
--clr-danger-a10: #d94a4a;
--clr-danger-a20: #eb9e9e;

/** Info colors */
--clr-info-a0: #21498a;
--clr-info-a10: #4077d1;
--clr-info-a20: #92b2e5;

/** Examples */
.bg-primary {
    color: var(--clr-primary-a50);
    background-color: var(--clr-surface-a0);
}