:root {

    /* OFFICE-COLORS */
    --primaryColor-dark: #232323;
    --primaryColor-light: #F4F5F9;
    --fillColor-dark: #353535;
    --fillColor-light: hsl(228, 16%, 90%);
    --disabledColor-dark: #707070;
    --fillColor-dark-borderColor: #f5f6fa1a;
    --blurredBackgroundColor: hsla(228, 29%, 97%, 0.8);
    --secondaryTextColor-light: #B2B2B2;
    --placeholderTextColor-dark: #727272;
    --secondaryColor-dark: #FFFFFF;
    --borderColor: hsl(228, 16%, 88%);
    --borderColor-dark: #2f2f2f;

    /* OFFICE-SECONDARY-COLORS */
    --secondaryColor-yellow: #FFD400;
    --secondaryColor-yellow-light: #FFF4CC;
    --secondaryColor-green: #48A111;
    --secondaryColor-blue: #2258eb;
    --secondaryColor-blue-hover: #4675f8;

}

.yellow-bg-dark-text {
    background-color: var(--secondaryColor-yellow);
    color: var(--primaryColor-dark);
}
button.yellow-bg-dark-text:hover {
    background-color: var(--primaryColor-light);
    color: var(--primaryColor-dark);
}


.blue-bg-light-text {
    background-color: var(--secondaryColor-blue);
    color: var(--primaryColor-light)
}
button.blue-bg-light-text:hover {
    background-color: var(--primaryColor-light);
    color: var(--primaryColor-dark);
}


.light-bg-dark-text {
    background-color: var(--primaryColor-light);
    color: var(--primaryColor-dark);
}
button.light-bg-dark-text:hover {
    opacity: 70%;
}