// These variables drive almost every aspect of the Frontend Styleguide.
// Every variable is declared as !default so that it can be overridden
// by a previous import.
//

//----------------
// -to-rem
//----------------
$global-font-size:  100% !default;
// Removing the !default from $em-base so we are not inheriting that
// value from Bourbon.
$em-base:           62.5%; //-> 10px for standard browsers, now 'Font size' from the browser setting works correctly if the uses specifies a bigger standard font-size.

$base-font-size:    1.6rem !default;
$base-line-height:  2.4rem !default;

// Paths
// Relative font and image file paths
$font-path:                     '../fonts/IBMPlexSans/' !default;
$image-path:                    '../img' !default;
$icons-folder-path:             "../img/svg-icons" !default;
// Typography
// Typography font-size and line-height

$font-name: 'IBMPlexSans'!default;

$h1-font-size:                4.0rem !default;
$h1-line-height:              4.8rem !default;

$h2-font-size:                3.0rem !default;
$h2-line-height:              4.0rem !default;

$h3-font-size:                2.4rem !default;
$h3-line-height:              3.2rem !default;

$h4-font-size:                2.0rem !default;
$h4-line-height:              3.2rem !default;

$h5-font-size:                1.6rem !default;
$h5-line-height:              2.4rem !default;

$h6-font-size:                1.3rem !default;
$h6-line-height:              2.4rem !default;

$display-1-heading-size:        4.8rem !default;
$display-1-heading-line-height: 5.6rem !default;

$display-2-heading-size:        3.2rem !default;
$display-2-heading-line-height: 4.0rem !default;

$body-text:                   1.6rem !default;
$body-text-line-height:       2.4rem !default;

$form-label:                  1.6rem !default;
$form-label-line-height:      2.4rem !default;

$small-text:                  1.4rem !default;
$small-text-line-height:      2.4rem !default;

$lead-font-size:              2.0rem !default;
$lead-line-height:            3.2rem !default;

$font-weight-normal:          400 !default;
$font-weight-medium:          500 !default;
$font-weight-semibold:        600 !default;
$font-weight-bold:            700 !default;
$font-style-normal:           normal !default;
$font-style-italic:           italic !default;

$font-family:                'IBMPlexSans', 'system' !default;

///////////////////////////////////////////////////////////////////
// Spacing helpers
//
// Mostly used to control spacing.
// You can add more entries to the $spacers map, should you need more variation.
// How to use: map-get($spacers, 2); This will give 4px (8*0.5).

$spacer: 8px !default;
$spacers: (
  0: 0,
  1: ($spacer * .25),   //2px
  2: ($spacer * .5),    //4px
  3: $spacer,           //8px
  305:($spacer * 1.5),  //8px
  4: ($spacer * 2),     //16px
  405: ($spacer * 2.5), //20px
  5: ($spacer * 3),     //24px
  505: ($spacer * 3.5), //28px
  6: ($spacer * 4),     //32px
  605: ($spacer * 4.5), //36px
  7: ($spacer * 5),     //40px
  705: ($spacer * 5.5), //44px
  8: ($spacer * 6),     //48px
  805: ($spacer * 6.5), //52px
  9: ($spacer * 7),     //56px
  905: ($spacer * 7.5), //60px
) !default;

//Translate $spacer into rem
$spacing-small:                 0.4rem !default;
$spacing:                       0.8rem !default;
$spacing-md-small:              1.6rem !default;
$spacing-medium:                2.4rem !default;
$spacing-large:                 3.2rem !default;
$spacing-x-large:               4.0rem !default;
$spacing-xx-large:              4.8rem !default;
$spacing-xxx-large:             5.6rem !default;


//############################### Swatches and Theming ####################
//###########################################################################

//NEW


////////////////////////////////////////////////////////////////////////////
//color contrasting
$color-base-001:              #ffffff !default;
$color-base-002:              #1a1a1a !default;

//Gray
$color-gray-001:              $color-base-002 !default;
$color-gray-002:              #454545 !default;
$color-gray-003:              #747474 !default;
$color-gray-004:              #999999 !default;
$color-gray-005:              #BFBFBF !default;
$color-gray-055:              #DCDCDC !default;
$color-gray-006:              #F5F5F5 !default;

//Greeen
$color-green-001:             #568331 !default;
$color-green-002:             #3C5C22 !default;
$color-green-021:             #233614 !default;
$color-green-003:             #358000 !default;
$color-green-004:             #eeffe2  !default;
$color-green-005:             #358000 !default;

//orange
//$color-orange-001:          #b4630c !default;
//$color-orange-002:          #d8770e !default;
//$color-orange-003:          #f08b1e !default;
$color-orange-004:            #febb30 !default;
$color-orange-005:            #ffeecc !default;

//red
$color-red-001:               #CC0000 !default;
$color-red-002:               #ffe0e0 !default;

//blue
$color-blue-001:              #004D99 !default;
$color-blue-002:              #004080 !default;
$color-blue-003:              #000040 !default;
$color-blue-004:              #e2f2fb !default;
$color-blue-005:              #067293 !default;
$color-blue-006:              #04556E !default;
$color-blue-007:              #033747 !default;
$color-blue-008:              #1B86C3 !default;

//purple
$color-purple-001:            #800080!default;

//Data visualisation colors
$color-data-turquoise-001:     #56D4D6 !default;
$color-data-turquoise-002:     #9AE5E6 !default;
$color-data-turquoise-003:     #CCF2F3 !default;
$color-data-turquoise-004:     #EEFAFA !default;

$color-data-teal-001:          #15b094 !default;
$color-data-teal-002:          #73D0BF !default;
$color-data-teal-003:          #B9E7DF !default;
$color-data-teal-004:          #E7F7F4 !default;

$color-data-orange-001:        #FF6A38 !default;
$color-data-orange-002:        #FFA688 !default;
$color-data-orange-003:        #FFD2C3 !default;
$color-data-orange-004:        #FFF0EB !default;

$color-data-magenta-001:       #D81884!default;
$color-data-magenta-002:       #E874B5!default;
$color-data-magenta-003:       #F3BADA!default;
$color-data-magenta-004:       #FBE7F2!default;

$color-data-purple-001:        #8F2B8F !default;
$color-data-purple-002:        #BC80BC !default;
$color-data-purple-003:        #DDBFDD !default;
$color-data-purple-004:        #F3E9F3 !default;

$color-data-violet-001:        #474E95 !default;
$color-data-violet-002:        #9195BF !default;
$color-data-violet-003:        #C8CADF !default;
$color-data-violet-004:        #ECEDF4 !default;

//############################### Component variables ####################
//########################################################################

// Base colors
$color-white:                 $color-base-001 !default;
$color-black:                 $color-base-002 !default;

// Gray-scales
//new
$color-gray-dark:             $color-gray-002 !default;
$color-gray-medium-dark:      $color-gray-003 !default;
$color-gray-medium-light:     $color-gray-004 !default;
$color-gray-light:            $color-gray-005 !default;
$color-gray-mediumpale:       $color-gray-055 !default;
$color-gray-pale:             $color-gray-006 !default;

//Focus
$color-focus:                 $color-gray-medium-dark !default;

// Text color
$color-text:                  $color-black !default;
$color-text-secondary:        $color-gray-003 !default;
$color-text-bright:           $color-gray-006 !default;

//Links color
$color-link:                  $color-blue-001 !default;
$color-link-hover:            $color-blue-003 !default;
$color-link-focus:            $color-blue-001 !default;
$color-link-visited:          $color-purple-001 !default;

// Default neutral color-scheme (the neutral one that is neither virk.dk nor borger.dk)
$color-neutral:               $color-gray-002 !default;
$color-neutral-darker:        $color-base-002 !default;
$color-neutral-darkest:       $color-base-002 !default;
$color-neutral-lightest:      $color-gray-004 !default; //TODO, need base color for lightest

// Functional theme colors
$color-primary:               $color-gray-003 !default;
$color-primary-medium:        $color-gray-002 !default;
$color-primary-dark:          $color-gray-001 !default;

$color-positive:              $color-green-005 !default;
$color-negative:              $color-red-001 !default;

//$color-primary-dark:
$color-primary-darker:        $color-base-002 !default;
$color-primary-darkest:       $color-base-002 !default;
$color-primary-lightest:      $color-gray-004 !default;
$color-background:            $color-gray-006 !default;

// Special text colors
$color-text-positive:         $color-green-005 !default;
$color-text-negative:         $color-red-001 !default;

// Colors used for alert boxes
$color-success:               $color-green-003 !default;
$color-success-light:         $color-green-004 !default;
$color-warning:               $color-orange-004 !default;
$color-warning-light:         $color-orange-005 !default;
$color-error:                 $color-red-001 !default;
$color-error-light:           $color-red-002 !default;
$color-info:                  $color-blue-008 !default;
$color-info-light:            $color-blue-004 !default;

//Data visualisation colors
$color-data-turquoise:                 $color-data-turquoise-001 !default;
$color-data-turquoise-high-opacity:    $color-data-turquoise-002 !default;
$color-data-turquoise-medium-opacity:  $color-data-turquoise-003 !default;
$color-data-turquoise-low-opacity:     $color-data-turquoise-004 !default;

$color-data-teal:                     $color-data-teal-001 !default;
$color-data-teal-high-opacity:        $color-data-teal-002 !default;
$color-data-teal-medium-opacity:      $color-data-teal-003 !default;
$color-data-teal-low-opacity:         $color-data-teal-004 !default;

$color-data-orange:                   $color-data-orange-001 !default;
$color-data-orange-high-opacity:      $color-data-orange-002 !default;
$color-data-orange-medium-opacity:    $color-data-orange-003 !default;
$color-data-orange-low-opacity:       $color-data-orange-004 !default;

$color-data-magenta:                  $color-data-magenta-001 !default;
$color-data-magenta-high-opacity:     $color-data-magenta-002 !default;
$color-data-magenta-medium-opacity:   $color-data-magenta-003 !default;
$color-data-magenta-low-opacity:      $color-data-magenta-004 !default;

$color-data-purple:                   $color-data-purple-001 !default;
$color-data-purple-high-opacity:      $color-data-purple-002 !default;
$color-data-purple-medium-opacity:    $color-data-purple-003 !default;
$color-data-purple-low-opacity:       $color-data-purple-004 !default;

$color-data-violet:                   $color-data-violet-001 !default;
$color-data-violet-high-opacity:      $color-data-violet-002 !default;
$color-data-violet-medium-opacity:    $color-data-violet-003 !default;
$color-data-violet-low-opacity:       $color-data-violet-004 !default;


//$color-error-background:      $color-red-003 !default;
//$color-success-background:    $color-green-004 !default;
//$color-warning-background:    $color-orange-005 !default;
//$color-info-background:       $color-blue-004 !default;

// Header, footer & navigation colors
$color-header-background:     $color-gray-006 !default;
$color-footer-background:     $color-gray-002 !default;
$color-topmenu-background:    $color-gray-002!default;
$color-subnav-background:     $color-gray-002!default;
$color-page:                  $color-base-001 !default;

// Colors for borders
$color-border:                $color-gray-003 !default;
$color-border-light:          $color-gray-006 !default;
$color-border-bright:         $color-base-001 !default;
$color-border-focus:          $color-gray-004 !default;

// Special colors
$color-alt-background:        $color-gray-006 !default;
$color-alt-background-hover:  $color-blue-004 !default;
$color-alt-table-header:      $color-gray-004 !default;
$color-required:              $color-red-001 !default;

// Button colors
$button-primary-color: $color-white !default;
$button-primary-bg: $color-primary !default;
$button-primary-border-color: $color-primary-medium !default;
$button-primary-hover-bg: $color-primary-medium !default;
$button-primary-hover-border-color: $color-primary-dark !default;
$button-primary-active-bg: $color-primary-dark !default;
$button-primary-active-border-color: $color-primary-dark !default;
$button-primary-focus-bg:  $color-primary !default;
$button-primary-focus-border-color: $color-primary-medium !default;
$button-disabled-bg: $color-gray-pale !default;

// Tag colors
$tag-color: $color-white !default;
$tag-bg: $color-gray-dark !default;
$tag-hover-bg: $color-gray-medium-dark !default;
$tag-active-bg: $color-black !default;
$tag-focus-bg: $color-gray-dark !default;

$color-shadow:                rgba(#000, 0.3) !default;
$color-transparent:           rgba(#000, 0) !default;

//input
$input-border-radius: 4px;
$input-border-width: 1px;
$input-top-bottom-padding: calc(8px - #{$input-border-width}); //7px
$input-left-right-padding: calc(16px - #{$input-border-width}); //15px
$input-font-size: $body-text;
$input-line-height: $body-text-line-height;
$input-standard-height: 4.0rem;
$input-top-margin: map-get($spacers, 3);

$input-border-width-feedback: 2px;
$input-top-bottom-padding-feedback: calc(8px - #{$input-border-width-feedback});
$input-left-right-padding-feedback: calc(16px - #{$input-border-width-feedback});

//Tabs
$tabs-active-border-color: $color-primary !default;

//Sidenavigation
$sidenav-link-color: $color-gray-001 !default;
$sidenav-link-color-hover: $color-primary !default;
$sidenav-link-current-color: $color-gray-001 !default;
$sidenav-link-active-color: $color-black !default;
$sidenav-active-border-width: 4px !default;

//Alert
$alert-heading-fontsize: $h5-font-size !default;
$alert-heading-lineheight: $h5-line-height !default;
$alert-heading-color: $color-text !default;
$alert-text-color: $color-text !default;

//Borders
$outer-border:            1px solid $color-gray-medium-dark; //$color-gray-medium-light;
$inner-border:            1px solid $color-gray-light;
$inner-inner-border:      1px solid $color-gray-mediumpale;
$button-border-width:     2px;
$button-border:           $button-border-width solid $button-primary-border-color;

//Backgrounds
$background-normal: #FFFFFF;
$background-alternative: #F5F5F5;
$background-modal: rgba(0, 0, 0, 0.75);


//----------------
// Grid
// ----------------

// Common grid breakpoints variables
$grid-xs:                     0 !default;
$grid-sm:                     576px !default;
$grid-md:                     768px !default;
$grid-lg:                     992px !default;
$grid-xl:                     1200px !default;

// Grid breakpoints..
$grid-breakpoints: (
  xs: $grid-xs,
  sm: $grid-sm,
  md: $grid-md,
  lg: $grid-lg,
  xl: $grid-xl
) !default;

// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
  sm: 100%,
  md: 100%,
  lg: 100%,
  xl: 1200px
) !default;

$grid-columns:                  12 !default;
$grid-gutter-width:             32px !default; //16px on each side of the columns

//----------------
// Magic Numbers
//----------------

$text-max-width:                66ch !default; //equivalent to 75 characters with spaces (ish).
$site-max-width:                $grid-xl !default; // 1200px
$site-margins:                  ($grid-gutter-width / 2) !default;
$site-margins-mobile:           1.5rem !default;
$article-max-width:             600px !default;
$label-border-radius:           2px !default;
$checkbox-border-radius:        2px !default;
$checkbox-small-height:         rem-calc(18) !default;
$checkbox-small-width:          rem-calc(18) !default;
$checkbox-small-lineheight:      rem-calc(24) !default;
$border-radius:                 3px !default;
$button-border-radius:          4px !default;
$static-border-radius:          0;
$interactive-border-radius:     4px;
$button-box-shadow:             rgba(0,0,0,.4) !default;
$box-shadow:                    0 0 2px $color-shadow !default;
$focus-outline:                 4px solid $color-focus;
$focus-spacing:                 1px;
$nav-responsive-breakpoint:     lg !default; // 992px

$box-shadow-heavy:               0 8px 16px 0 $color-shadow;
$box-shadow-moderately:          0 4px 8px 0 $color-shadow;
$box-shadow-slightly:            0 2px 4px 0 $color-shadow;


// 44 x 44 pixels hit target following Apple iOS Human Interface
$hit-area:                      4.4rem !default;