:root {
    --color-primary: #5d1413;
    --color-secondary: #DB261D;
    --color-success: #498E96;
    --color-info: #17a2b8;
    --color-warning: #E88F35;
    --color-waiting: #F3BD43;
    --color-danger: #BD261B;
    --color-gray: #8C8C8C;
    --color-gray500: #E9EAEE;
    --color-light: #fff;
    --color-dark: #000;
    --color-default: #050A1B;

    --color-border: #e1e1e1;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-bold: 600;
    
    --typo-micro: 12px; 
    --typo-xs: 14px; 
    --typo-sm: 16px; 
    --typo-default: 20px;
    --typo-md: 22px; 
    --typo-lg: 28px; 
    --typo-xl: 32px;  

    --rounded: 10px; 
    --rounded-md: 20px; 
    --rounded-lg: 30px; 

    --box-shadow: 0 13px 16px rgba(0,0,0,0.04);
}


.fw-normal{
    font-weight: var(--fw-normal);
}
.fw-medium{
    font-weight: var(--fw-medium);
}
.fw-bold{
    font-weight: var(--fw-bold);
}


.typo-micro{
    font-size: var(--typo-micro);
}
.typo-xs{
    font-size: var(--typo-xs);
}
.typo-sm{
    font-size: var(--typo-sm);
}
.typo-md{
    font-size: var(--typo-md);
}
.typo-lg{
    font-size: var(--typo-lg);
}
.typo-xl{
    font-size: var(--typo-xl);
}
.typo-default{
    font-size: var(--typo-default);
}


.text-primary{
    color: var(--color-primary) !important;
}
.text-secondary{
    color: var(--color-secondary) !important;
}
.text-success{
    color: var(--color-success) !important;
}
.text-success2{
    color: var(--color-success2) !important;
}
.text-info{
    color: var(--color-info) !important;
}
.text-warning{
    color: var(--color-warning) !important;
}
.text-danger{
    color: var(--color-danger) !important;
}
.text-gray{
    color: var(--color-gray) !important;
}
.text-light{
    color: var(--color-light) !important;
}
.text-dark{
    color: var(--color-dark) !important;
}
.text-default{
    color: var(--color-default) !important;
}


.bg-primary{
    background-color: var(--color-primary) !important;
}
.bg-secondary{
    background-color: var(--color-secondary) !important;
}
.bg-success{
    background-color: var(--color-success) !important;
}
.bg-success2{
    background-color: var(--color-success2) !important;
}
.bg-info{
    background-color: var(--color-info) !important;
}
.bg-warning{
    background-color: var(--color-warning) !important;
}
.bg-danger{
    background-color: var(--color-danger) !important;
}
.bg-gray{
    background-color: var(--color-gray) !important;
}
.bg-gray500{
    background-color: var(--color-gray500) !important;
}
.bg-light{
    background-color: var(--color-light) !important;
}
.bg-dark{
    background-color: var(--color-dark) !important;
}
.bg-default{
    background-color: var(--color-default) !important;
}