:root {
    /**
     * Spacing
     * NOTE: This is in PX because we want them to specific.
     */

    --hwc-spacing-small-1: 4px;
    --hwc-spacing-small-2: 8px;
    --hwc-spacing-small-3: 12px;
    --hwc-spacing-small-4: 16px;
    --hwc-spacing-medium-1: 20px;
    --hwc-spacing-medium-2: 24px;
    --hwc-spacing-medium-3: 32px;
    --hwc-spacing-medium-4: 40px;
    --hwc-spacing-large-1: 48px;
    --hwc-spacing-large-2: 64px;
    --hwc-spacing-large-3: 80px;
    --hwc-spacing-large-4: 120px;
    --hwc-spacing-large-5: 160px;

    /**
    * Shared colors
    */

    --hwc-color-gray-dark: #6e6e6e;
    --hwc-color-gray-normal: #d6d6d6;
    --hwc-color-gray-light-stroke: #e4e4e4;
    --hwc-color-gray-light-fill: #f2f2f2;

    --hwc-color-white: #fff;
    --hwc-color-black: #000;
    --hwc-color-black-hover: #1E1E1E;

    --hwc-color-alert-green: #7BC144;
    --hwc-color-alert-yellow: #fdbb2f;
    --hwc-color-alert-red: #e32d22;



    /**
    * Colors with opacity
    */

    --hwc-color-opaque-black-20: rgba(0,0,0, 0.20); /* #000000 */
    --hwc-color-opaque-black-10: rgba(0,0,0, 0.10);
    --hwc-color-opaque-black-7: rgba(0,0,0, 0.07);
    --hwc-color-opaque-white: rgba(255, 255, 255, 0.50);


    /**
    * Width limitations
    */

    --hwc-width-slim: 590px;
    --hwc-width-default: 690px; /* Max default width (articles) */
    --hwc-width-wide: 1200px; /* Default site width, used in footer etc */
    --hwc-width-narrow: 300px; /* Narrow column for centered contents */

    /**
    * Fonts
    */

    --hwc-font-primary-light: 'Posten Sans Light', sans-serif;
    --hwc-font-primary-regular: 'Posten Sans Regular', sans-serif;
    --hwc-font-primary-medium: 'Posten Sans Medium', sans-serif;
    --hwc-font-primary-bold: 'Posten Sans Bold', sans-serif;

    /**
    * Font sizes
    * NOTE: To achieve fluid font sizes on h-tags we used the calculation described here:
    * https://css-tricks.com/snippets/css/fluid-typography/
    */
    --hwc-font-size-max-view-port: 1200;
    --hwc-font-size-min-view-port: 300;
    --hwc-font-size-min-view-port-px: 300px;



    --hwc-font-size-max-h1-large: 72; /* 80 */
    --hwc-font-size-max-h1-large-px: 72px;
    --hwc-font-size-min-h1-large: 40;
    --hwc-font-size-min-h1-large-px: 40px;
    --hwc-h1-large-line-height: 1.111;

    --hwc-font-size-max-h1: 48; /* 48 */
    --hwc-font-size-max-h1-px: 48px;
    --hwc-font-size-min-h1: 32;
    --hwc-font-size-min-h1-px: 32px;
    --hwc-h1-line-height: 1.1667;

    --hwc-font-size-max-h2: 32; /* 44 */
    --hwc-font-size-max-h2-px: 32px;
    --hwc-font-size-min-h2: 28;
    --hwc-font-size-min-h2-px: 28px;
    --hwc-h2-line-height: 1.25;

    --hwc-font-size-max-h3: 24; /* 28 */
    --hwc-font-size-max-h3-px: 24px;
    --hwc-font-size-min-h3: 22;
    --hwc-font-size-min-h3-px: 22px;
    --hwc-h3-line-height: 1.333;

    --hwc-font-size-max-h4: 20; /* 22 */
    --hwc-font-size-max-h4-px: 20px;
    --hwc-font-size-min-h4: 18;
    --hwc-font-size-min-h4-px: 18px;
    --hwc-h4-line-height: 1.4;

    --hwc-font-size-max-h5: 18; /* 20 */
    --hwc-font-size-max-h5-px: 18px;
    --hwc-font-size-min-h5: 16;
    --hwc-font-size-min-h5-px: 16px;
    --hwc-h5-line-height: 1.444;

    --hwc-font-size-max-h6: 16; /* 18 */
    --hwc-font-size-max-h6-px: 16px;
    --hwc-font-size-min-h6: 14;
    --hwc-font-size-min-h6-px: 14px;
    --hwc-h6-line-height: 1.5;

    --hwc-font-size-max-caption: 13;
    --hwc-font-size-max-caption-px: 13px;
    --hwc-font-size-min-caption: 12;
    --hwc-font-size-min-caption-px: 12px;
    --hwc-caption-line-height: 1.5;

    --hwc-font-size-max-p: 20; /* 22 */
    --hwc-font-size-max-p-px: 20px;
    --hwc-font-size-min-p: 18;
    --hwc-font-size-min-p-px: 18px;
    --hwc-p-line-height: 1.4;

    --hwc-font-size-max-lead: 20; /* 22 */
    --hwc-font-size-max-lead-px: 20px;
    --hwc-font-size-min-lead: 18;
    --hwc-font-size-min-lead-px: 18px;
    --hwc-lead-line-height: 1.4;

    --hwc-font-size-max-small: 18; /* 20 */
    --hwc-font-size-max-small-px: 18px;
    --hwc-font-size-min-small: 16;
    --hwc-font-size-min-small-px: 16px;
    --hwc-small-line-height: 1.444;

    --hwc-font-size-max-smaller: 17; /* 18 */
    --hwc-font-size-max-smaller-px: 17px;
    --hwc-font-size-min-smaller: 16;
    --hwc-font-size-min-smaller-px: 16px;
    --hwc-smaller-line-height: 1.450;

    --hwc-font-size-max-technical: 16; /* 17 */
    --hwc-font-size-max-technical-px: 16px;
    --hwc-font-size-min-technical: 15;
    --hwc-font-size-min-technical-px: 15px;
    --hwc-technical-line-height: 1.47;

    --hwc-font-size-max-smallest: 12; /* 13 */
    --hwc-font-size-max-smallest-px: 12px;
    --hwc-font-size-min-smallest: 11;
    --hwc-font-size-min-smallest-px: 11px;
    --hwc-smallest-line-height: 1.5;

    --hwc-font-size-max-card-title: 28; /* 28 */
    --hwc-font-size-max-card-title-px: 28px;
    --hwc-font-size-min-card-title: 26;
    --hwc-font-size-min-card-title-px: 26px;
    --hwc-card-title-line-height: 1.25;

    --hwc-font-size-h1-large: calc(var(--hwc-font-size-min-h1-px) + (var(--hwc-font-size-max-h1-large) - var(--hwc-font-size-min-h1-large)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));
    --hwc-font-size-h1: calc(var(--hwc-font-size-min-h1-px) + (var(--hwc-font-size-max-h1) - var(--hwc-font-size-min-h1)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));
    --hwc-font-size-h2: calc(var(--hwc-font-size-min-h2-px) + (var(--hwc-font-size-max-h2) - var(--hwc-font-size-min-h2)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));
    --hwc-font-size-h3: calc(var(--hwc-font-size-min-h3-px) + (var(--hwc-font-size-max-h3) - var(--hwc-font-size-min-h3)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));
    --hwc-font-size-h4: calc(var(--hwc-font-size-min-h4-px) + (var(--hwc-font-size-max-h4) - var(--hwc-font-size-min-h4)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));
    --hwc-font-size-h5: calc(var(--hwc-font-size-min-h5-px) + (var(--hwc-font-size-max-h5) - var(--hwc-font-size-min-h5)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));
    --hwc-font-size-h6: calc(var(--hwc-font-size-min-h6-px) + (var(--hwc-font-size-max-h6) - var(--hwc-font-size-min-h6)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));


    --hwc-font-size-caption: calc(var(--hwc-font-size-min-caption-px) + (var(--hwc-font-size-max-caption) - var(--hwc-font-size-min-caption)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));
    --hwc-font-size-p: calc(var(--hwc-font-size-min-p-px) + (var(--hwc-font-size-max-p) - var(--hwc-font-size-min-p)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));
    --hwc-font-size-lead: calc(var(--hwc-font-size-min-lead-px) + (var(--hwc-font-size-max-lead) - var(--hwc-font-size-min-lead)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));
    --hwc-font-size-technical: calc(var(--hwc-font-size-min-technical-px) + (var(--hwc-font-size-max-technical) - var(--hwc-font-size-min-technical)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));

    --hwc-font-size-small: calc(var(--hwc-font-size-min-small-px) + (var(--hwc-font-size-max-small) - var(--hwc-font-size-min-small)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));
    --hwc-font-size-smaller: calc(var(--hwc-font-size-min-smaller-px) + (var(--hwc-font-size-max-smaller) - var(--hwc-font-size-min-smaller)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));
    --hwc-font-size-smallest: calc(var(--hwc-font-size-min-smallest-px) + (var(--hwc-font-size-max-smallest) - var(--hwc-font-size-min-smallest)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));
    --hwc-font-size-card-title: calc(var(--hwc-font-size-min-card-title-px) + (var(--hwc-font-size-max-card-title) - var(--hwc-font-size-min-card-title)) * ((100vw - var(--hwc-font-size-min-view-port-px)) / (var(--hwc-font-size-max-view-port) - var(--hwc-font-size-min-view-port))));


    /*
    Sizes of responsive typography are limited my the max-size-setting.
    The css media query for these are available in typography.css
    */








    /**
    * Breakpoints
    * em = 16px
    */

    /* Borders */
    --hwc-border-thickness: 1px;
    --hwc-border-thickness-thick: 2px;
    --hwc-border-radius: 2px;

    /* Fixed sizes */
    --hwc-navbar-height-mobile: 90px;
    --hwc-navbar-height-desktop: 112px;
    --hwc-input-field-height: 58px;
    --hwc-navbar-search-max-width: 530px;
    @media(--large) {
        --hwc-navbar-search-max-width: 70%;
    }



    /**
    * Transitions
    */
    --hwc-transition-time-quick: 0.130s;
    --hwc-transition-time-normal: 0.300s;
    --hwc-transition-time-slow: 0.700s;

    --hwc-transition-easing-normal: ease;
    --hwc-transition-easing-in: ease-in;
    --hwc-transition-easing-out: ease-out;


    /**
    * Global z-index values
    */

    --z-index--stickynav: 100;
    --z-index--navbar: 100;
    --z-index--navbar-drawer: 200;
    --z-index--navbar-drawer-foreground: 300;
    --z-index--navbar-search: 300;
    --z-index--navbar-search-foreground: 400;
    --z-index--hero-search: 100;
    --z-index--modal: 400;
    --z-index--modal-foreground: 500;
}

@import 'variables-posten';
@import 'variables-bring';