:root {
    --primary:#2fd1b2;
    --primary-900:#006947;
    --primary-800:#008764;
    --primary-700:#009873;
    --primary-600:#00a984;
    --primary-500:#00b891;
    --primary-400:#00c5a2;
    --primary-300:#2FD1B2;
    --primary-200:#B1EBDE;
    --primary-100:#b1ebde;
    --primary-50:#DFF7F3;
    --on-primary-high-emphasis:#ffffff;
    --on-primary-medium-emphasis:rgba(255, 255, 255, 0.5);
    --secondary:#090C26;
    --secondary-900:#090c26;
    --secondary-800:#2a2d48;
    --secondary-700:#484a67;
    --secondary-600:#5b5d7b;
    --secondary-500:#8284a4;
    --secondary-400:#a4a5c6;
    --secondary-300:#c9caed;
    --secondary-200:#dcddff;
    --secondary-100:#e9eaff;
    --secondary-50:#f3f4ff;
    --on-secondary-high-emphasis:#ffffff;
    --on-secondary-medium-emphasis:rgba(255, 255, 255, 0.5);
    --background:#ffffff;
    --surface:#f4f7f6;
    --error:#c92512;
    --success:#2094fa;
    --on-primary:#ffffff;
    --on-secondary:#ffffff;
    --on-background:#000000;
    --on-surface:#000000;
    --on-surface-medium-emphasis:rgba(0, 0, 0, 0.5);
    --on-error:#ffffff;
    --on-success:#ffffff;
    --outline:rgba(0, 0, 0, 0.15);
    --disabled:rgba(0, 0, 0, 0.3);
    --surface-hover:#0000000a;
}
/* primary */
.bg__primary {
    background-color: var(--primary);
    color: var(--on-primary);
}
.bg__primary--900 {
    background-color: var(--primary-900);
    color: var(--on-primary);
}
.bg__primary--800 {
    background-color: var(--primary-800);
    color: var(--on-primary);
}
.bg__primary--700 {
    background-color: var(--primary-700);
    color: var(--on-primary);
}
.bg__primary--600 {
    background-color: var(--primary-600);
    color: var(--on-primary);
}
.bg__primary--500 {
    background-color: var(--primary-500);
    color: var(--on-primary);
}
.bg__primary--400 {
    background-color: var(--primary-400);
    color: var(--on-primary);
}
.bg__primary--300 {
    background-color: var(--primary-300);
    color: var(--on-primary);
}
.bg__primary--200 {
    background-color: var(--primary-200);
    color: var(--on-primary);
}
.bg__primary--100 {
    background-color: var(--primary-100);
    color: var(--on-background);
}
.bg__primary--50 {
    background-color: var(--primary-50);
    color: var(--on-background);
}
.border__primary {
    border: 1px solid var(--primary);
    color: var(--primary);
    background-color: #ffffff;
}

/* secondary */
.bg__secondary {
    background-color: var(--secondary);
    color: var(--on-secondary);
}
.bg__secondary--900 {
    background-color: var(--secondary-900);
    color: var(--on-secondary);
}
.bg__secondary--800 {
    background-color: var(--secondary-800);
    color: var(--on-secondary);
}
.bg__secondary--700 {
    background-color: var(--secondary-700);
    color: var(--on-secondary);
}
.bg__secondary--600 {
    background-color: var(--secondary-600);
    color: var(--on-secondary);
}
.bg__secondary--500 {
    background-color: var(--secondary-500);
    color: var(--on-secondary);
}
.bg__secondary--400 {
    background-color: var(--secondary-400);
    color: var(--on-secondary);
}
.bg__secondary--300 {
    background-color: var(--secondary-300);
    color: var(--on-secondary);
}
.bg__secondary--200 {
    background-color: var(--secondary-200);
    color: var(--on-secondary);
}
.bg__secondary--100 {
    background-color: var(--secondary-100);
    color: var(--on-background);
}
.bg__secondary--50 {
    background-color: var(--secondary-50);
    color: var(--on-background);
}
.border__secondary {
    border: 1px solid var(--secondary);
    color: var(--secondary);
    background-color: #ffffff;
}
/* surface */
.bg__surface{
    background-color: var(--surface);
    color: var(--on-surface);
}
/* disabled */
.bg__disabled {
    background-color: var(--disabled);
    color: var(--on-primary);
}
.outline {
    border: 1px solid var(--outline) !important;
    color: var(--disabled) !important;
    background-color: #ffffff !important;
}

/* error */
.bg__error {
    background-color: var(--error);
    color: var(--on-error);
}
.border__error {
    border: 1px solid var(--error);
    color: var(--error);
    background-color: #ffffff;
}