:root {
    /***
     ** GLOBAL COMPONENTS
     ** These colors are used across the entire application.
     *
     * Vars name: --color-<section>-<element>-<attribute>-<state>
     * Example: --color-navbar-link-text-active
    */

    /* Badges */
    --color-primary-badge-background: #c8102e;
    --color-primary-badge-background-hover: #a30d26;
    --color-primary-badge-text: #ffffff;
    --color-primary-badge-text-hover: #ffffff;

    --color-secondary-badge-background: #7c2529;
    --color-secondary-badge-background-hover: #5e1a1d;
    --color-secondary-badge-text: #ffffff;
    --color-secondary-badge-text-hover: #ffffff;

    --color-tertiary-badge-background: #ebebeb;
    --color-tertiary-badge-background-hover: #dcdcdc;
    --color-tertiary-badge-text: #4a4a4a;
    --color-tertiary-badge-text-hover: #4a4a4a;
}