: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: #ffffff;
    --color-navbar-style-background-scrolled: #ffffffc2;
    --color-navbar-style-border-bottom: transparent;
    --color-navbar-style-border-bottom-pixels: 0px;

    --color-navbar-link-text: #002569;
    --color-navbar-link-text-hover: #002569c0;
    --color-navbar-link-text-active: #002569c0;

    /* Search Box */
    --color-searchbox-tabs-inactivetab: #F0F7FF;
    --color-searchbox-tabs-inactivetab-hover: #e3f2ff;
    --color-searchbox-tabs-text-inactivetab: #272524;
    --color-searchbox-tabs-text: #272524;

    --color-searchbox-mainbox-background: #FBF9F7;
    --color-searchbox-mainbox-activetab: #FBF9F7;
    --color-searchbox-mainbox-border: #B5B2AD;

    --color-searchbox-button-background: #002569;
    --color-searchbox-button-background-hover:#002569;
    --color-searchbox-button-text: #ffffff;
    --color-searchbox-button-text-hover: #B5B2AD;
    --color-searchbox-button-border: #ffffff;
    --color-searchbox-button-border-hover: #B5B2AD;

    /* Badges */
    --color-primary-badge-background: #70BCFF;
    --color-primary-badge-background-hover: #70BCFF;
    --color-primary-badge-text: #272524;
    --color-primary-badge-text-hover: #272524;

    --color-secondary-badge-background: #78E2DA;
    --color-secondary-badge-background-hover: #78E2DA;
    --color-secondary-badge-text: #272524;
    --color-secondary-badge-text-hover: #272524;

    --color-tertiary-badge-background: #0073E0;
    --color-tertiary-badge-background-hover: #0073E0;
    --color-tertiary-badge-text: #272524;
    --color-tertiary-badge-text-hover: #272524;

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

    --color-metadata-link-text: #002569;
    --color-metadata-link-text-hover: #0073E0;

    --color-facets-link-text: #002569;
    --color-facets-link-text-hover: #0073E0;

    /* Types of Views (icons) */
    --color-view-background-active: #FBF9F7;
    --color-view-background-hover: #F0F7FF80;
    --color-view-icontext-active: #002569;
    --color-view-border: #002569;

    /* Pagination */
    --color-pagination-background-active: #FBF9F7;
    --color-pagination-background-hover: #002569;
    --color-pagination-text-active: #002569;
    --color-pagination-text-hover: #FBF9F7;
    --color-pagination-border: #002569;
    --color-pagination-border-hover: #70BCFF;

    /* Footer */
    --color-footer-background: #F0F7FF;
    --color-footer-text: #002569;

    /* Layout -> Homepage */
    --color-homepage-welcome-text: #FBF9F7;
    --color-homepage-featured-objects-section-background: #002569;
    --color-homepage-card-background: #EBFCFA;
    --color-homepage-card-background-hover: #EBFCFA;
    --color-homepage-card-title: #002569;
    --color-homepage-card-metadata: #0073E0;
    --color-homepage-card-link: #0073E0;
    --color-homepage-card-border: #002569;

    /* Layout -> Results List */
    --color-results-list-title: #002569;
    --color-results-list-title-hover: #0073E0;
    --color-results-list-metadata: #0073E0;

    --color-fulltextdropdown-background: #F0F7FF;
    --color-fulltextdropdown-background-hover: #EBFCFA;
    --color-fulltextdropdown-text: #002569;
    --color-fulltextdropdown-text-hover: #0073E0;

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