// Colors

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #222222;
$black:    #1D1D1D;

$grays: ();

$grays: map-merge(
  (
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
  ),
  $grays
);

$purple:          #7954ff;
$purple-light:    #8988eb;
$pink:            #e83e8c;
$teal:            #78eac1;
$teal-darker:     #6ddeba;
$teal-darkest:    #33ba9e;

$blue: #21bef4;
$blue-dark: #326dd1;
$red: #ec0404;
$red-light: #FF3131;
$petrol: #236a84;
$petrol-transparent: rgba(35, 106, 132, 0.95);
$petrol-dark-transparent:  rgba(38, 51, 64, 0.95);
$petrol-dark: #263340;
$green: #8cbd24;
$orange: #f48d21;
$yellow: #d8ce0d;
$indigo: $blue-dark;
$cyan: $blue;
$black: #1d1d1d;
$black-transparent: rgba(0,0,0, 0.25);
$white: #fff;
$white-opaque: rgba(255, 255, 255, 1);
$white-transparent: rgba(255, 255, 255, 0.5);
$white-transparenter: rgba(255, 255, 255, 0.25);
$white-invisible: rgba(255, 255, 255, 0);
$translucent: rgba(255, 255, 255, 0.1);

$gray-darkest: #262626;
$gray-darker: #5f656d;
$gray-dark: #888888;
$gray: #9fa2a8;
$gray-light: #bfc1c5;
$gray-lighter: #e6e6e6;
$gray-lightest: #f2f2f2;

$gray-transparent: rgba(191, 193, 197, 0.25);


////// Functional colors //////

$primary: $petrol;
$secondary: $petrol;
$success: $green;
$info: $blue-dark;
$warning: $blue;
$danger: $red;

$body-bg: $white;
$body-color: $black;
$link-color: $petrol;
$link-hover-color: $blue;

$light: $white;
$dark: $gray-900;
$border-color: $gray-lighter;
$border-color-dark: $gray-darker;
$disabled: $gray-light;
$disabled-dark: $gray-darker;
$header: $black;
$actionbar: $primary;
$label-default-color: $gray-darker;
$label-color: $gray-darker;
$label-color-inverted: $gray-light;
$placeholder-color: $gray-light;
$card-bg: $white;
$card-bg-gray: $gray-lighter;

$critical: $danger;
$high: $yellow;
$low: $gray;

$color-product-website: $primary;
$color-product-apple: $info;
$color-product-android: $green;
$color-product-streaming: $red-light;
$color-product-gaming: $orange;
$color-product-windows: $yellow;

$navigation-customer-color: $gray-900;
$navlink-customer-hover-color: $teal;
$navlink-customer-hover-bg: $gray-800;
$navlink-customer-active-bg: $teal;

$navigation-tester-bg: $black;
$navlink-tester-hover-color: $link-hover-color;
$navlink-tester-hover-bg: $gray-800;
$navlink-tester-active-bg: $purple;

$navigation-manager-bg: $white;
$navlink-manager-hover-color: $gray-800;
$navlink-manager-hover-bg: $gray-lighter;
$navlink-manager-active-bg: $teal-darker;

$colors: ();
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
  (
    "blue":       $blue,
    "indigo":     $indigo,
    "purple":     $purple,
    "pink":       $pink,
    "red":        $red,
    "orange":     $orange,
    "yellow":     $yellow,
    "green":      $green,
    "teal":       $teal,
    "cyan":       $cyan,
    "white":      $white,
    "gray":       $gray-600,
    "gray-dark":  $gray-800
  ),
  $colors
);

$theme-colors: ();
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);



// Spacing

// Set root font-size for rem, spacing and font-size calculation
:root {
  font-size: 1rem;
}

$spacer: 1.875rem;
$spacers: ();
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: $spacer,
    4: ($spacer * 1.5),
    5: ($spacer * 3)
  ),
  $spacers
);

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$sizes: map-merge(
  (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto
  ),
  $sizes
);

$spacer-x: $spacer;
$spacer-y: $spacer;
$border-width: 1px;
$spacing: $spacer;
$spacing-xxxs: 2px;
$spacing-xxs: calc($spacer / 6);
$spacing-xs: calc($spacer / 3);
$spacing-sm: calc($spacer / 2);
$spacing-md: calc(($spacing-xs)*2);
$spacing-lg: calc(($spacing-xs)*5);
$spacing-xl: $spacer * 2;
$spacing-xxl: $spacer * 3;
$spacing-2xl: 8.75rem;
$spacing-3xl: $spacer * 6;
$spacing-4xl: $spacer * 8;
$spacing-5xl: $spacer * 10;
$spacing-6xl: $spacer * 12;
$spacing-7xl: $spacer * 14;
$spacing-8xl: $spacer * 16;
$spacing-heading: $spacing-md;
$section-margin: $spacing;
$capped-width: 60rem;
$icon: 20px;
$icon-lg: 40px;
$icon-xl: 60px;
$icon-sm: 18px;
$icon-xs: 16px;
$icon-spacing: $spacing-xs; // default margin between icon and text
$progress-bar-thin-height: 2px;
$popover-width: 200px;
$popover-padding: $spacing-sm;
$header-height: 3.75rem;
$sidebar-width: 12.5rem;
$meta-sidebar-width: $spacing * 10;

// Body

$body-padding-mobile: $spacing-sm;
$body-padding-tablet: $spacing;
$body-padding-desktop: $spacing-lg;


// Grid breakpoints

$ds-breakpoints: (
  xs: 0, 
  sm: 680px, 
  md: 900px, 
  lg: 1150px, 
  xl: 1600px, 
  2xl:1900px, 
  3xl: 2200px
  ) !default;

$sidebar-breakpoint: map-get($ds-breakpoints, md) - 1px;
@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;

  @each $key, $num in $map {
    @if $prev-num != null and $prev-num >= $num {
      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    }

    $prev-key: $key;
    $prev-num: $num;
  }
}
@include _assert-ascending($ds-breakpoints, "$ds-breakpoints");


// Grid containers

$container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1140px);

@include _assert-ascending($container-max-widths, "$container-max-widths");

// Grid columns

$grid-columns: 12;
$grid-gutter-width: $spacing-md;


// Typography
 
$font-family-sans-serif: "Source Sans 3", sans-serif;
$font-family-serif: $font-family-sans-serif;
$font-family-monospace: 'Source Code Pro', monospace;
$font-family-mono: 'Source Code Pro', monospace;
$font-family-base: $font-family-sans-serif;

$font-size-root: 1rem;

$font-size-xl: 4.25rem;
$font-size-base: 0.875rem;
$font-size-lg: 1.25rem;
$font-size-sm: 0.813rem;
$font-size-label: $font-size-sm;
$font-size-label-sm: 0.688rem;
$font-size-xs: 0.688rem;

$font-weight-base: 400;
$line-height-base: 1.5;

$h1-font-size: 2.25rem;
$font-size-h1: 2.25rem;
$h2-font-size: 1.875rem;
$font-size-h2: 1.875rem;
$h3-font-size: 1.563rem;
$font-size-h3: 1.563rem;
$h4-font-size: 1.375rem;
$font-size-h4: 1.375rem;
$h5-font-size: 1.125rem;
$font-size-h5: 1.125rem;
$h6-font-size: 1rem;
$font-size-h6: 1rem;
$btn-font-size: $font-size-base;
$font-size-btn: $font-size-base;

$font-size-icon: 20px;
$font-size-icon-sm: 18px;
$font-size-icon-md: 30px;
$font-size-icon-xs: 14px;
$font-size-icon-xxs: 12px;
$font-size-icon-lg: $font-size-icon*2;
$font-size-icon-xl: $font-size-icon*3;

$display1-size: 5.625rem;
$font-size-display1: 5.625rem;
$display2-size: 3.75rem;
$font-size-display2: 3.75rem;
$display3-size: 3.125rem;
$font-size-display3: 3.125rem;
$display4-size: 3rem;
$font-size-display4: 3rem;

$display1-weight: 300;
$display2-weight: 300;
$display3-weight: 300;
$display4-weight: 300;

$headings-margin-bottom: $spacing-sm;
$headings-font-family: inherit;
$headings-font-weight: 300;
$font-weight-headings: 300;
$headings-line-height: 1.1;
$headings-color: inherit;

$font-weight-bold: 700;

$font-weight-lighter:         200;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-semibold:        600;
$font-weight-bold:            700;
$font-weight-bolder:          800;
$font-weight-label:           400;   


// Buttons
$btn-height: 2.5rem;
$btn-sm-height: $spacing;
$btn-xs-height: $spacing-md;
$btn-xl-height: $spacing-2xl;


// Forms
$input-height: 2.5rem;

// Actionbar
$actionbar-height: 4.375rem;
$zindex-content-actionbar: 1001;

// Border radius
$border-radius: 5px;
$border-radius-lg: 10px;

// Cards
$card-xs: $spacing-xxl;
$card-sm: 180px;
$card-md: 280px;
$card-lg: 400px;
$card-border-radius: $border-radius-lg;

// Modals
$modal-padding: $spacing;
$modal-lg: 1200px;
$modal-md: 700px;
$modal-sm: 400px;

// Popovers
$popover-bg: $petrol-dark-transparent;
$popover-width: $spacing * 8;
$popover-color: $white;


// Tags
$tag-height: 1.5rem;