:root {
    /*
    * Breakpoints
    * - Not used yet, but hopefully CSS will catch up and let us use them in media queries somehow
    */
    /*
    --apBreakpointXs: 440px;
    --apBreakpointMd: 720px;
    --apBreakpointLg: 960px;
    --apBreakpointXl: 1240px;
    */

    /*
    * Colors
    */

    --apTextColor: #2f2c2f;
    --apMutedTextColor: #525252;
    --apDarkMutedTextColor: #444;
    --apBackgroundColor: #fff;
    --apFocusBgColor: #f5f5f5;

    /* --apPrimaryColor: #E01220; */
    --apPrimaryColor: #d70926;
    --apPrimaryColorRgb: 224, 18, 32;
    --apPrimaryDarkColor: #b20632;

    --apSecondaryLightColor: #99D6EA;
    --apSecondaryColor: #40AAB8;
    --apSecondaryDarkColor: #002B49;
    --apSecondaryXDarkColor: #000000;

    /* --apNeutralVeryLightColor: #f1f1f2; */
    --apNeutralXlightColor: #f5f5f5;
    --apNeutralLightColor: #eeeeef;
    /* --apNeutralBaseColor: #c6c8c6; */
    --apNeutralSemiDarkColor: #a9aca9;
    --apNeutralDarkColor: #828383;
    /* --apNeutralXDarkColor: #2f2c2f; */

    --apClimateColor: #6ECEB2;
    --apClimateDarkColor: #2B9A78;
    /*--apColorLightBlue: #99D6EA;*/
    --apKnowledgeColor: #B9A3E3;
    --apKnowledgeDarkColor: #6F51AB;

    --apButtonInvalidVariantBgColor: pink;
    --apButtonInvalidVariantFgColor: blue;
    --apButtonInvalidVariantHoverBgColor: pink;
    --apButtonInvalidVariantHoverFgColor: green;

    --apButtonPrimaryBgColor: var(--apPrimaryColor);
    --apButtonPrimaryFgColor: #fff;
    --apButtonPrimaryHoverBgColor: var(--apPrimaryDarkColor);
    --apButtonPrimaryHoverFgColor: #fff;

    --apButtonSecondaryBgColor: var(--apSecondaryDarkColor);
    --apButtonSecondaryFgColor: #fff;
    --apButtonSecondaryHoverBgColor: var(--apSecondaryXDarkColor);
    --apButtonSecondaryHoverFgColor: #fff;

    --apButtonDefaultBgColor: var(--apSecondaryDarkColor);
    --apButtonDefaultFgColor: #fff;
    --apButtonDefaultHoverBgColor: var(--apSecondaryXDarkColor);
    --apButtonDefaultHoverFgColor: #fff;

    /* General */
    /* --apTextDarkGrey: #888; */

    /* Link */
    --apLinkColor: #2f2c2f;
    --apLinkHoverColor: var(--apPrimaryDarkColor);

    /* Standard */
    --apDangerBgColor: #a00;
    --apDangerFgColor: #fff;
    --apSuccessBgColor: #008000;
    --apSuccessFgColor: #fff;

    --apInfoBgColor: #DEF1FF;
    --apInfoFgColor: #2A1F5C;

    /*
    * Spacing
    */

    --apListIndention: 1.8rem;

    /* Horizontal spacing */
    --apHspacingUnit: 0.3rem;   /* Base horizontal spacing - all others are multiplums of this */
    --apHspacingSmall: 0.6rem;
    --apHspacing: 1.2rem;
    --apHspacingLarge: 3rem;
    --apHspacingXLarge: 12rem;
    --apIndention: 2.1rem;
    --apIndentionSmall: 1.5rem;

    /* Vertical spacing */
    --apVspacingUnit: 0.2rem;   /* Base vertical spacing - all others are multiplums of this */
    --apVspacingSmall: 0.4rem;  /* $vertical-rythm */
    --apVspacing: 0.6rem;
    --apVspacingMedium: 1rem;   /* $vertical-rythm--medium */
    --apVspacingLarge: 1.4rem;  /* $vertical-rythm--spacing */
    --apVspacingXLarge: 2.8rem;  /* $vertical-rythm--spacing */


    /*
    * Font sizes
    */
    --apFontSizeSmall: 0.8rem;
    --apLineHeightSmall: 1rem;

    --apFontSizeDefault: 1rem;
    --apLineHeightDefault: 1.8rem;

    --apFontSizeMedium: 1.1rem;
    --apLineHeightMedium: 1.2rem;
    --apLineHeightMediumSpaced: 1.4rem;

    --apFontSizeLarge: 1.4rem;
    --apLineHeightLarge: 1.9rem;

    --apFontSizeXlarge: 1.7rem;
    --apLineHeightXlarge: 2.2rem;

    --apFontSizeXXlarge: 1.9rem;
    --apLineHeightXXlarge: 2.4rem;

    --apFontSizeXXXlarge: 2.4rem;
    --apLineHeightXXXlarge: 3.0rem;

    --apFontSizeXXXXlarge: 2.4rem;
    --apLineHeightXXXXlarge: 3.0rem;


    /*
    * Font
    */
    --apFontDefaultFamily: 'Maison Neue', Helvetica, sans-serif;
    --apFontMonoFamily: 'Maison Neue Mono', monospace;
    --apFontHeadingFamily: 'Noe Text', Helvetica, sans-serif;

    /*
    * z-index
    */
    --apZindex1: 10;
    --apZindex2: 20;
    --apZindex3: 30;
    --apZindex4: 40;

    /*
    * Borders
    */
    --apBorderWidth: 0.16rem;
    --apBorderWidthSmall: 0.1rem;
    --apBorderWidthXsmall: 0.06rem;
    --apBorderRadius: 0.26rem;

    /*
    * Container
    */
    --apContainerSidePadding: var(--apHspacingSmall);
    --apContainerWidthXtight: 620px;
    --apContainerWidthTight: 740px;
    --apContainerWidthMedium: 950px;
    --apContainerWidth: 1100px;
    --apContainerWidthWide: 1400px;
    --apContainerWidthXwide: 1640px;

    /*
    * Button
    */
    --apButtonPaddingSmall: var(--apVspacingSmall) var(--apHspacingSmall);
    --apButtonPadding: 0.6rem 1.7rem;
    --apButtonPaddingSidesWide: 2.1rem;
    --apButtonPaddingLarge: 1rem 1.9rem;
    --apButtonMargin: 0;

    /*
    * Input
    */
    --apInputHPadding: 0.6rem;
    --apInputVPadding: 0.6rem;
    --apInputMargin: 0;
    --apInputBorderColor: var(--apNeutralSemiDarkColor);
    --apInputBorderFocusColor: var(--apSecondaryDarkColor);
    --apInputBorderSelectedColor: var(--apSecondaryDarkColor);
    --apInputBgColor: #fff;
    --apInputBgFocusColor: #fff;
    --apInputDisabledBgColor: var(--apNeutralLightColor);
    --apInputTextColor: var(--apTextColor);
    --apInputTextFocusColor: var(--apTextColor);
    --apInputPlaceholderColor: var(--apMutedTextColor);
    --apInputPlaceholderFocusColor: var(--apMutedTextColor);
    
    --apSearchInputBorderRadius: 1.9rem;
    --apSearchInputBgColor: var(--apNeutralXlightColor);
    --apSearchInputBgFocusColor: var(--apNeutralXlightColor);
    --apSearchInputBorderColor: var(--apNeutralXlightColor);
    --apSearchInputBorderFocusColor: var(--apNeutralDarkColor);
    --apSearchInputColor: var(--apTextColor);
    --apSearchInputColorFocus: var(--apTextColor);
    --apSearchInputPlaceholderColor: var(--apMutedTextColor);
    --apSearchInputPlaceholderFocusColor: var(--apMutedTextColor);

    /*
    * Strong
    */
    --apStrongDisplay: inline;
    --apStrongBgColor: transparent;
    --apStrongPadding: 0;

    /*
    * Various
    */
    --apOutlineColor: var(--apTextColor);
    --apOutlineColorAlt: var(--apSecondaryColor);
    --apHeaderHeight: 3.7rem;
    --transitionSwiftOut: cubic-bezier(0, 0, 0.1, 1);
    --spacedTextLetterSpacing: 0.06rem;
    --inlineTextBoxPadding: 0 0.3rem;
    --swiftOutAnimationFunction: cubic-bezier(0, 0, 0.1, 1);
}

@media (min-width: 440px) {
    :root {
        --apContainerSidePadding: var(--apHspacing);
    }
}

@media (min-width: 720px) {
    :root {
        --apContainerSidePadding: var(--apHspacingLarge);

        --apFontSizeMedium: 1.2rem;
        --apLineHeightMedium: 1.3rem;
        --apLineHeightMediumSpaced: 1.5rem;

        --apFontSizeLarge: 1.7rem;
        --apLineHeightLarge: 2.3rem;

        --apFontSizeXlarge: 2.0rem;
        --apLineHeightXlarge: 2.7rem;

        --apFontSizeXXlarge: 2.6rem;
        --apLineHeightXXlarge: 3.6rem;

        --apFontSizeXXXlarge: 3.7rem;
        --apLineHeightXXXlarge: 4.5rem;

        --apFontSizeXXXXlarge: 4rem;
        --apLineHeightXXXXlarge: 4.7rem;

        --apButtonPaddingSidesWide: 4rem;
        --apButtonPaddingLarge: 1rem 3.5rem;
    }
}

@media (min-width: 960px) {
    :root {
        --apHeaderHeight: 7.9rem;

        --apFontSizeXXXXlarge: 5.2rem;
        --apLineHeightXXXXlarge: 5.8rem;
    }
}