/**
 * VARIABLES
 * 
 * Contains css variables used by various components.
 */

:root {
    --jor-color-lighter-green: #e4f0db;
    --jor-color-light-green: #C2DDB0;
    --jor-color-dark-green: #2E614C;
    --jor-color-beige: #F8F6E8;
    --jor-color-beige-light-20: rgba(241, 233, 218, 0.2);
    --jor-color-beige-superlight: #FFFEF5;
    --jor-color-beige-medium: #F0EDDD;
    --jor-color-beige-strong: #E8E5D1;
    --jor-color-lighter-blue: #ecf6fb;
    --jor-color-venice-blue: #07708C;
    --jor-color-lighter-brown: #f1e9da;
    --jor-color-dark-brown: #514939;
    --jor-color-dark-brown-20: rgba(81, 73, 57, 0.2);
    --jor-color-darker-brown: #403e3b;
    --jor-color-gray-70: #525147;
    --jor-color-gray-0: #fff;
    --jor-color-yellow: #FBEF74;
    --jor-color-yellow-medium: #ECBF00;
    --jor-color-orange: #DD7300;
    --jor-color-dark-orange: #965B1D;
    --jor-color-blue-light: #ecf6fb;

    --jor-color-gray-000: hsl(53deg 7% 100%);
    --jor-color-gray-005: hsl(53deg 7% 95%);
    --jor-color-gray-010: hsl(53deg 7% 90%);
    --jor-color-gray-020: hsl(53deg 7% 80%);
    --jor-color-gray-030: hsl(53deg 7% 70%);
    --jor-color-gray-040: hsl(53deg 7% 60%);
    --jor-color-gray-050: hsl(53deg 7% 50%);
    --jor-color-gray-060: hsl(53deg 7% 40%);
    --jor-color-gray-070: hsl(53deg 7% 30%);
    --jor-color-gray-080: hsl(53deg 7% 20%);
    --jor-color-gray-090: hsl(53deg 7% 10%);
    --jor-color-gray-100: hsl(53deg 7% 0%);

    --jor-text-ratio: 1.2;
    --jor-text-size-080: calc(var(--jor-text-size-090) / var(--jor-text-ratio));
    --jor-text-size-090: calc(var(--jor-text-size-100) / var(--jor-text-ratio));
    --jor-text-size-100: 1rem;
    --jor-text-size-110: calc(var(--jor-text-size-100)* var(--jor-text-ratio));
    --jor-text-size-120: calc(var(--jor-text-size-110)* var(--jor-text-ratio));
    --jor-text-size-130: calc(var(--jor-text-size-120)* var(--jor-text-ratio));
    --jor-text-size-140: calc(var(--jor-text-size-130)* var(--jor-text-ratio));
    --jor-text-size-150: calc(var(--jor-text-size-140)* var(--jor-text-ratio));
    --jor-text-size-160: calc(var(--jor-text-size-150)* var(--jor-text-ratio));
    --jor-text-size-heading-1: clamp(var(--jor-text-size-140), 1.7635rem + 1.38vw, var(--jor-text-size-150));
    --jor-text-size-heading-2: clamp(var(--jor-text-size-120), 1.224rem + 0.96vw, var(--jor-text-size-130));
    --jor-text-size-heading-3: clamp(var(--jor-text-size-110), 1.02rem + 0.80vw, var(--jor-text-size-120));
    --jor-text-size-heading-4: clamp(var(--jor-text-size-100), 0.85rem + 0.66vw, var(--jor-text-size-110));
    --jor-text-size-heading-5: var(--jor-text-size-100);
    --jor-text-size-heading-6: var(--jor-text-size-090);
    --jor-text-size-lead: clamp(var(--jor-text-size-110), 1.02rem + 0.80vw, var(--jor-text-size-120));
    --jor-text-font-stack: 'TT Commons Pro', Arial, Helvetica, sans-serif;

    --jor-heading-font-color: var(--jor-color-dark-brown);
    --jor-font-color: var(--jor-color-gray-080);
    --jor-link-font-color: var(--jor-color-dark-green);
    --jor-link-hover-font-color: var(--jor-link-font-color);
    /* Hover color? */
    --jor-link-focus-background-color: var(--jor-color-yellow-medium);

    --jor-focus-ring-outline: 3px solid white !important;
    --jor-focus-ring-outline-offset: 0px !important;
    --jor-focus-ring-box-shadow: 0 0 0 6px black !important;

    --jor-page-header-background-color: var(--jor-color-beige);
    --jor-page-header-border-color: var(--jor-color-dark-brown-20);
    --jor-page-header-font-color: var(--jor-color-dark-brown);

    --jor-page-content-background-color: var(--jor-color-beige-superlight);
    --jor-page-aside-background-color: var(--jor-color-beige);

    --jor-page-footer-background-color: var(--jor-color-dark-green);
    --jor-page-footer-font-color: var(--jor-color-beige);
    --jor-page-footer-social-links-background-color: var(--jor-color-darker-brown);
    --jor-page-footer-social-links-font-color: var(--jor-color-beige);
    --jor-page-footer-social-links-hover-font-color: var(--jor-color-yellow);
    --jor-page-footer-link-font-color: var(--jor-color-lighter-green);
    --jor-page-footer-linklist-border-color: var(--jor-color-beige-light-20);
    --jor-page-footer-linklist-cols: 2;
    --jor-page-footer-linklist-cols-mobile: 1;
    --jor-page-footer-link-hover-font-color: var(--jor-color-yellow);

    /* Envision overrides
    ---------------------------------------------------------------------------- */
    --env-breadcrumb-divider-color: var(--jor-font-color);

    /* Custom envision styling (jor-envision.css)
    ---------------------------------------------------------------------------- */
    --jor-env-button-font-color: var(--jor-color-dark-green);
    --jor-env-button-background-color: var(--jor-color-gray-0);
    --jor-env-button-border-color: var(--jor-color-dark-green);
    --jor-env-button-hover-font-color: var(--jor-color-dark-green);
    --jor-env-button-hover-background-color: var(--jor-color-blue-light);
    --jor-env-button-hover-border-color: var(--jor-color-dark-green);
    --jor-env-button-focus-font-color: var(--jor-color-dark-green);
    --jor-env-button-focus-background-color: var(--jor-color-gray-0);
    --jor-env-button-focus-border-color: var(--jor-color-dark-green);
    --jor-env-button-border-radius: 0.25rem;

    --jor-env-button-primary-font-color: var(--jor-color-gray-0);
    --jor-env-button-primary-background-color: var(--jor-color-dark-green);
    --jor-env-button-primary-border-color: var(--jor-color-dark-green);
    --jor-env-button-primary-hover-font-color: var(--jor-color-gray-0);
    --jor-env-button-primary-hover-background-color: var(--jor-color-venice-blue);
    --jor-env-button-primary-hover-border-color: var(--jor-color-venice-blue);

    /* TODO: How should css vars from StyleGuide be included? */
    --jor-shadow-color: 0deg 0% 62%;
    --jor-shadow-elevation-low: 0.4px 0.3px 0.8px hsl(var(--jor-shadow-color) / 0), 0.8px 0.7px 1.6px hsl(var(--jor-shadow-color) / 0.29), 1.8px 1.5px 3.5px hsl(var(--jor-shadow-color) / 0.58);

    /* Accordion
    ---------------------------------------------------------------------------- */
    --jor-accordion-border-color: var(--jor-color-dark-brown);
    --jor-accordion-button-font-color: var(--jor-color-dark-brown);
    --jor-accordion-button-hover-font-color: var(--jor-color-dark-brown);

    /* Main navigation (Hamburger menu) 
    ---------------------------------------------------------------------------- */
    --jor-main-nav-background-color: var(--jor-color-beige-medium);
    --jor-main-nav-link-font-color: var(--jor-color-dark-brown);
    --jor-main-nav-link-background-color: var(--jor-color-beige-medium);
    --jor-main-nav-link-hover-font-color: var(--jor-color-dark-green);
    --jor-main-nav-link-border-color: var(--jor-color-beige-medium);
    --jor-main-nav-link-hover-border-color: var(--jor-color-dark-green);

    /* Table of Contents
    ---------------------------------------------------------------------------- */
    --jor-table-of-content-link-font-color: var(--jor-color-dark-brown);
    --jor-table-of-content-link-hover-font-color: var(--jor-color-dark-green);
    --jor-table-of-content-link-active-font-color: var(--jor-color-dark-green);
    --jor-table-of-content-link-active-background-color: var(--jor-color-lighter-green);
    --jor-table-of-content-link-active-border-color: var(--jor-color-dark-green);

    /* Linkblock
    ---------------------------------------------------------------------------- */
    --jor-linkblock-servicelinks-background-color: var(--jor-color-dark-green);
    --jor-linkblock-servicelinks-font-color: var(--jor-color-beige);
    --jor-linkblock-servicelinks-link-background-color: var(--jor-color-beige);
    --jor-linkblock-servicelinks-link-hover-background-color: var(--jor-color-yellow);
    --jor-linkblock-servicelinks-link-font-color: var(--jor-color-dark-green);
    --jor-linkblock-servicelinks-secondary-link-background-color: var(--jor-color-yellow);
    --jor-linkblock-servicelinks-secondary-link-hover-background-color: var(--jor-color-light-green);

    /* Link list
    ---------------------------------------------------------------------------- */
    --jor-linklist-font-color: var(--jor-color-dark-brown);
    --jor-linklist-hover-font-color: var(--jor-link-hover-font-color);
    --jor-linklist-border-color: var(--jor-color-dark-brown);
    --jor-linklist-hover-border-color: var(--jor-color-dark-green);

    /* Navigation block
    ---------------------------------------------------------------------------- */
    --jor-navigation-block-card-background-color: var(--jor-color-beige-medium);
    --jor-navigation-block-card-border-color: var(--jor-color-beige-medium);
    --jor-navigation-block-card-font-color: var(--jor-color-dark-brown);
    --jor-navigation-block-card-hover-background-color: var(--jor-color-light-green);
    --jor-navigation-block-card-hover-border-color: var(--jor-color-dark-green);
    --jor-navigation-block-card-hover-font-color: var(--jor-color-dark-green);

    --jor-page-navigation-item-border-color: var(--jor-color-dark-brown);
    --jor-page-navigation-item-icon-color: var(--jor-color-venice-blue);

    /* Linkblock
    ---------------------------------------------------------------------------- */
    --jor-breadcrumb-link-color: var(--jor-link-font-color);
    --jor-breadcrumb-link-hover-color: var(--jor-link-hover-font-color);
    --jor-breadcrumb-link-focus-background-color: var(--jor-link-focus-background-color);

    /* Decorations: Dark panel
    ---------------------------------------------------------------------------- */
    --jor-decoration-dark-panel-background-color: var(--jor-color-beige-strong);
    --jor-decoration-dark-panel-font-color: var(--jor-color-dark-brown);

    /* Image card grid
    ---------------------------------------------------------------------------- */
    --jor-image-card-font-color: var(--jor-color-gray-70);
    --jor-image-card-heading-font-color: var(--jor-color-dark-brown);
    --jor-image-card-link-font-color: var(--jor-link-font-color);
    --jor-image-card-link-hover-font-color: var(--jor-link-hover-font-color);

    /* Image card grid
    ---------------------------------------------------------------------------- */
    --jor-image-card-grid-cols: 3;
    --jor-image-card-grid-cols-tablet: 2;
    --jor-image-card-grid-cols-mobile: 1;
    --jor-image-card-grid-horizontal-span-width: 2;
    --jor-image-card-grid-horizontal-span-width-tablet: 1;
    --jor-image-card-grid-horizontal-span-width-mobile: 1;
    --jor-image-card-grid-card-border-color: var(--jor-color-dark-brown-20);

    /* Startpage
    ---------------------------------------------------------------------------- */
    --jor-starpage-background-color: var(--jor-color-beige);
    --jor-startpage-hero-overlap: 4rem;
    /* How much the hero and the row with navigationblock and servicelinks should overlap.  */
    --jor-startpage-hero-font-color: var(--jor-color-beige);

    /* Feedback
    ---------------------------------------------------------------------------- */
    --jor-feedback-background-color: var(--jor-color-beige);

    /* Badge/Tags/Categories
    ---------------------------------------------------------------------------- */
    --jor-badge-category-background-color: var(--jor-color-lighter-green);
    --jor-badge-category-border-color: var(--jor-color-dark-green);
    --jor-badge-category-font-color: var(--jor-color-dark-green);
    --jor-badge-category-database-background-color: var(--jor-color-lighter-brown);
    --jor-badge-category-database-border-color: var(--jor-color-dark-orange);
    --jor-badge-category-database-font-color: var(--jor-color-dark-orange);
    --jor-badge-category-statistics-background-color: var(--jor-color-lighter-blue);
    --jor-badge-category-statistics-border-color: var(--jor-color-venice-blue);
    --jor-badge-category-statistics-font-color: var(--jor-color-venice-blue);
    --jor-badge-open-category-background-color: var(--jor-color-lighter-blue);
    --jor-badge-open-category-border-color: var(--jor-color-venice-blue);
    --jor-badge-open-category-font-color: var(--jor-color-venice-blue);
    --jor-badge-open-type-background-color: var(--jor-color-lighter-green);
    --jor-badge-open-type-border-color: var(--jor-color-dark-green);
    --jor-badge-open-type-font-color: var(--jor-color-dark-green);
}