:root {
    /* colors */
    --brand-color: #2B1599;
    --primary-color: #7C4BEE;
    --semitransparent-primary-color: rgba(124, 75, 238, 0.7);
    --on-primary-color: #FFFFFF;
    --secondary-color: #F4F1FE;
    --on-secondary-color: #7C4BEE;
    --section-color: #F6F6F6;
    --error-color: #E13F1A;
    --on-error-color: #FFFFFF;
    --error-container-color: #F6F6F6;
    --grey-tube-color: #F6F6F6;
    --grey-text-color: #4C4C4C;
    --green-tube-color: #EBF9E0; 
    --green-text-color: #2AA52F;
    --purple-tube-color: #F4F1FE; 
    --purple-text-color: #7C4BEE;
    --yellow-tube-color: #FFFAE0; 
    --yellow-text-color: #FABD03;
    --red-tube-color: #F6F6F6; 
    --red-text-color: #E13F1A;
    --transparent-color: rgba(0, 0, 0, 0);
    /* typeface */
    --app-font-family: 'Poppins', 'Roboto', sans-serif;
}
body {
    font-family: 'Poppins','Roboto', sans-serif;
}
/* color and combos combos */
.primary-color {
    color: var(--primary-color);
}
/* fonts sizes */
.title-medium {
    font-family: var(--app-font-family);
    font-size: 16px;
    font-weight: 500;
}
.title-small {
    font-family: var(--app-font-family);
    font-size: 14px;
    font-weight: 400;
}
.small-font {
    font-size: 0.7rem;
}
/* common styles */
.p-brand-logo {
    height: min(40px, 5vmin);
}
.app_icon {
    width: 135px;
    height: 40px;
}