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

    /* Navigation bar */
    --color-navbar-style-background: #343a40;
    --color-navbar-style-background-scrolled: #343a40c2;
    --color-navbar-style-border-bottom: transparent;
    --color-navbar-style-border-bottom-pixels: 0px;

    --color-navbar-link-text: #ffffff80;
    --color-navbar-link-text-hover: #ffffffc0;
    --color-navbar-link-text-active: #ffffffc0;

    /* Search Box */
    --color-searchbox-tabs-inactivetab: #ebebeb;
    --color-searchbox-tabs-inactivetab-hover: #e3f2ff;
    --color-searchbox-tabs-text-inactivetab: #000;
    --color-searchbox-tabs-text: #000;

    --color-searchbox-mainbox-background: #ffffff;
    --color-searchbox-mainbox-activetab: #ffffff;
    --color-searchbox-mainbox-border: #ffffff;

    --color-searchbox-button-background: #234CBC;
    --color-searchbox-button-background-hover:#545b62;
    --color-searchbox-button-text: #ffffff;
    --color-searchbox-button-text-hover: #ffffff;
    --color-searchbox-button-border: #234CBC;
    --color-searchbox-button-border-hover: #545b62;

    /* Badges */
    --color-primary-badge-background: #cddbf7;
    --color-primary-badge-background-hover: #0058b1;
    --color-primary-badge-text: #17317a;
    --color-primary-badge-text-hover: #ffffff;

    --color-secondary-badge-background: #d4f0ef;
    --color-secondary-badge-background-hover: #d4f0ef;
    --color-secondary-badge-text: #000000;
    --color-secondary-badge-text-hover: #000000;

    --color-tertiary-badge-background: #e5eaf4;
    --color-tertiary-badge-background-hover: #e5eaf4;
    --color-tertiary-badge-text: #424854;
    --color-tertiary-badge-text-hover: #212529;

    /* Links */
    --color-footer-link-text: #ffffff;
    --color-footer-link-text-hover: #ffffff;

    --color-metadata-link-text: #17317a;
    --color-metadata-link-text-hover: #17317a;

    --color-facets-link-text: #17317a;
    --color-facets-link-text-hover: #17317a;

    /* Types of Views (icons) */
    --color-view-background-active: #e7eeff;
    --color-view-background-hover: #e7eeff80;
    --color-view-icontext-active: #17317a;
    --color-view-border: #d4d2dA;

    /* Pagination */
    --color-pagination-background-active: #234cbc;
    --color-pagination-background-hover: #cddbf7;
    --color-pagination-text-active: #ffffff;
    --color-pagination-text-hover: #000;
    --color-pagination-border: #234cbc;
    --color-pagination-border-hover: #234cbc;

    /* Footer */
    --color-footer-background: #343a40;
    --color-footer-text: #ffffff;

    /* Layout -> Homepage */
    --color-homepage-welcome-text: #ffffff;
    --color-homepage-featured-objects-section-background: #2b2f38;
    --color-homepage-card-background: #ffffff;
    --color-homepage-card-background-hover: #ffffff;
    --color-homepage-card-title: #212529;
    --color-homepage-card-metadata: #212529;
    --color-homepage-card-link: #212529;
    --color-homepage-card-border: #ddd;

    /* Layout -> Results List */
    --color-results-list-title: #17317a;
    --color-results-list-title-hover: #212529;
    --color-results-list-metadata: #212529;

    --color-fulltextdropdown-background: #f6f9fe;
    --color-fulltextdropdown-background-hover: #f6f9fe;
    --color-fulltextdropdown-text: #212529;
    --color-fulltextdropdown-text-hover: #212529;

    /* Layout -> Details (/view) */
    --color-details-title: #212529;
    --color-details-description: #212529;
    --color-details-subtitle: #212529;
    --color-details-text: #212529;
}