: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: #e3f2ff;
    --color-navbar-style-background-scrolled: #e3f2ff;
    --color-navbar-style-border-bottom: #002c4c;
    --color-navbar-style-border-bottom-pixels: 5px;

    --color-navbar-link-text: #0078bd;
    --color-navbar-link-text-hover: #002c4c;
    --color-navbar-link-text-active: #002c4c;

    /* 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: #002c4c;
    --color-searchbox-button-background-hover:#545b62;
    --color-searchbox-button-text: #ffffff;
    --color-searchbox-button-text-hover: #ffffff;
    --color-searchbox-button-border: #002c4c;
    --color-searchbox-button-border-hover: #545b62;

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

    /* Badges */
    --color-primary-badge-background: #fdf5cd;
    --color-primary-badge-background-hover: #fdf3cd;
    --color-primary-badge-text: #002c4c;
    --color-primary-badge-text-hover: #ffffff;

    --color-secondary-badge-background: #d7d3f1;
    --color-secondary-badge-background-hover: #d7d3f1;
    --color-secondary-badge-text: #002c4c;
    --color-secondary-badge-text-hover: #ffffff;

    --color-tertiary-badge-background: #c8e7dd;
    --color-tertiary-badge-background-hover: #c8e7dd;
    --color-tertiary-badge-text: #002c4c;
    --color-tertiary-badge-text-hover: #ffffff;

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

    --color-metadata-link-text: #002c4c;
    --color-metadata-link-text-hover: #002c4c;

    --color-facets-link-text: #002c4c;
    --color-facets-link-text-hover: #002c4c;

    /* Types of Views (icons) */
    --color-view-background-active: #d9f3f3;
    --color-view-background-hover: #d9f3f3;
    --color-view-icontext-active: #2a2b30;
    --color-view-border: #bfc9d9;

    /* Pagination */
    --color-pagination-background-active: #002c4c;
    --color-pagination-background-hover: #edf6ff;
    --color-pagination-text-active: #ffffff;
    --color-pagination-text-hover: #2a2b30;
    --color-pagination-border: #a9b4ef;
    --color-pagination-border-hover: #a9b4ef;

    /* Footer */
    --color-footer-background: #002C4C;
    --color-footer-text: #C6C6C6;

    /* 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: #2a2b30;
    --color-results-list-title-hover: #002c4c;
    --color-results-list-metadata: #383838;

    --color-fulltextdropdown-background: #d9f3f3;
    --color-fulltextdropdown-background-hover: #d9f3f3;
    --color-fulltextdropdown-text: #383838;
    --color-fulltextdropdown-text-hover: #002c4c;

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