: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: rgba(252, 186, 25, 0.76) !important;
    --color-navbar-style-border-bottom-pixels: 3px;

    --color-navbar-link-text: #01336680;
    --color-navbar-link-text-hover: #1E5189c0;
    --color-navbar-link-text-active: #1E5189c0;

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

    --color-searchbox-mainbox-background: #D8EAFD;
    --color-searchbox-mainbox-activetab: #255A90;
    --color-searchbox-mainbox-border: #transparent;

    --color-searchbox-button-background: #013366;
    --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: #D8EAFD;
    --color-primary-badge-background-hover: #0058b1;
    --color-primary-badge-text: #2D2D2D;
    --color-primary-badge-text-hover: #ffffff;

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

    --color-tertiary-badge-background: #F4E1E2;
    --color-tertiary-badge-background-hover: #e5eaf4;
    --color-tertiary-badge-text: #2D2D2D;
    --color-tertiary-badge-text-hover: #212529;

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

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

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

    /* Types of Views (icons) */
    --color-view-background-active: #ffffff;
    --color-view-background-hover: #e7eeff80;
    --color-view-icontext-active: #255A90;
    --color-view-border: #d4d2dA;

    /* Pagination */
    --color-pagination-background-active: #013366;
    --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: #ffffff;
    --color-footer-text: #343a40;
    --color-footer-text-hover: #343a4080;

    /* Layout -> Homepage */
    --color-homepage-welcome-text: #ffffff;
    --color-homepage-featured-objects-section-background: #F1F8FE;
    --color-homepage-card-background: #ffffff;
    --color-homepage-card-background-hover: #ffffff;
    --color-homepage-card-title: #D2D2D2;
    --color-homepage-card-metadata: #474543;
    --color-homepage-card-link: #255A90;
    --color-homepage-card-border: #D8D8D8;

    /* Layout -> Results List */
    --color-results-list-title: #013366;
    --color-results-list-title-hover: #212529;
    --color-results-list-metadata: #2D2D2D;

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

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