$space-xx-large: 128px;
$space-x-large: 64px;
$space-large: 48px;
$space-base: 24px;
$space-small: 16px;
$space-x-small: 8px;
$space-xx-small: 4px;
$border-none: none;
$border-style-default: solid;
$border-width-none: 0;
$border-width-default: 1px;
$border-width-ex-small: 3px;
$border-width-small: 5px;
$border-radius-default: 6px;
$border-radius-circle: 50%;
$border-radius-none: 0;
$border-radius-rounder: 6px;
$box-shadow-default: 1px 2px 13px -9px #001123;
$box-shadow-hover: 1px 9px 13px -9px #1D7CAF;
$box-shadow-aragorn: 4px 4px 0px 0px rgba(92, 106, 196, 0.1);
$color-lh-background-dark: rgb(32, 42, 51);
$color-lh-dk-red: rgb(147, 27, 54);
$color-lh-md-green: rgb(40, 150, 103);
$color-lh-bkg-blue: rgb(245, 252, 255);
$color-lh-rich-black: rgb(32, 42, 51);
$color-mango: rgb(255, 219, 77);
$color-lh-blue-accent: rgb(86, 178, 228);
$color-silver: rgb(127, 136, 145);
$color-lh-dk-blue: rgb(6, 104, 147);
$color-white: rgb(255, 255, 255);
$color-lh-green-accent: rgb(43, 252, 184);
$color-lh-md-red: rgb(187, 34, 68);
$color-lh-dk-green: rgb(28, 107, 73);
$color-lh-dk-gray: rgb(87, 87, 92);
$color-coral: rgb(226, 98, 79);
$color-gray-dark: rgb(102, 102, 102);
$color-gray-light: rgb(153, 153, 153);
$color-oil: rgb(51, 51, 51);
$color-black-transparent: rgba(0, 0, 0, 0.6);
$color-lh-black: rgb(51, 49, 50);
$color-rich-black: rgb(0, 17, 35);
$color-cloud: rgb(245, 245, 245);
$color-lh-md-blue: rgb(29, 124, 175);
$color-lh-pink: rgb(255, 101, 132);
$font-family-heading: 'Montserrat', Verdana, sans-serif;
$font-family-text: 'Montserrat', Verdana, sans-serif;
$font-family-template: 'Fira code', 'Fira Mono', 'Consolas', 'Menlo', Courier, monospace;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-demi: 600;
$font-weight-bold: 700;
$font-size-paragraph: 21px;
$font-size-sm-h1: 33px;
$font-size-sm-h2: 26px;
$font-size-sm-h3: 20px;
$font-size-md-h1: 40px;
$font-size-sm-h4: 17px;
$font-size-md-h2: 32px;
$font-size-sm-h5: 15px;
$font-size-md-h3: 24px;
$font-size-md-h4: 19px;
$font-size-md-h5: 17px;
$font-size-md-h6: 14px;
$font-size-sm-base: 18px;
$font-size-md-small: 17px;
$font-size-large: 20px;
$font-size-sm-small: 14px;
$font-size-root: 16px;
$font-size-md-xs: 14px;
$font-size-md-base: 16px;
$font-size-base: 1rem;
$headings-margin-bottom: 0.5rem;
$headings-margin-top: 0rem;
$input-field-height: 2.4rem;
$form-switch-width: 55px;
$form-switch-offset: 27px;
$letter-spacing-x-large: 2px;
$letter-spacing-large: 1px;
$letter-spacing-base: 0;
$letter-spacing-small: -0.5px;
$letter-spacing-x-small: -1px;
$line-height-base: 1.52;
$line-height-large: 1.52;
$line-height-small: 1;
$line-height-extra-small: .5;
$line-height-heading: 1.2;
$logo-width-small: 135px;
$logo-width-base: 180px;
$logo-width-medium: 270px;
$logo-width-large: 360px;
$link-decoration-default: none;
$link-hover-decoration: underline;
$margin-none: 0;
$margin-small: 4px;
$margin-default: 16px;
$margin-medium: 24px;
$margin-large: 32px;
$margin-auto: auto;
$media-query-small: (min-width: 576px);
$media-query-medium: (min-width: 768px);
$media-query-large: (min-width: 992px);
$media-query-extra-large: (min-width: 1200px);
$opacity-none: 0;
$opacity-disabled: 0.80;
$opacity-active-menu-on-dark-background: 0.1;
$opacity-film-on-dark-background: 0.05;
$opacity-webcard: 0.85;
$padding-vertical-large: 8px;
$padding-vertical-default: 6px;
$padding-none: 0;
$padding-ratio-16x9: 56.25%;
$padding-horizontal-sm-base: 16px;
$padding-vertical-small: 4px;
$padding-horizontal-large: 16px;
$padding-vertical-extra-large: 32px;
$padding-horizontal-default: 12px;
$padding-horizontal-small: 8px;
$padding-vertical-sm-base: 8px;
$padding-horizontal-extra-large: 32px;
$sizing-x-small: 5px;
$sizing-sm-small: 14px;
$sizing-md-small: 16px;
$sizing-sm-base: 27.2px;
$sizing-md-base: 32px;
$sizing-md-medium: 36px;
$sizing-md-large: 64px;
$theme-new-tropic: theme--thenewtropic;
$theme-evergrey: theme--theevergrey;
$theme-pulptown: theme--pulptown;
$theme-bridgeliner: theme--bridgeliner;
$theme-incline: theme--theincline;
$duration-quickly: 0.15s;
$duration-slowly: 0.5s;
$z-index-modal: 9999;
$z-index-kaput: -1;
$z-index-sticky: 100;
$mobile-screensize: 640px;
$tablet-screensize: 900px;
$desktop-screensize: 1200px;
$newsletter-width: 640px;
$newsletter-card-width: 640px;

/* VUE DESIGN SYSTEM SPACING HELPERS
--------------------------------------------- */

$spacing-ratio: 1.7;

/*
  INSET-SPACE: For interface containers.
  INSET-SQUISH-SPACE: For buttons, form elements, cells.
  STACK-SPACE: For vertically stacked content.
  INLINE-SPACE: For things displayed inline.
*/

// Create inset-space
//
// @param  {Number} inset-space to set
@mixin inset-space($value) {
  padding: $value;
}

// Create inset-squish-space
//
// @param  {Number} inset-squish-space to set
@mixin inset-squish-space($value) {
  padding: round($value / $spacing-ratio - 1px) $value round($value / $spacing-ratio);
}

// Create stack-space
//
// @param  {Number} stack-space to set
@mixin stack-space($value) {
  margin-bottom: $value;
  &:last-child {
    margin-bottom: 0;
  }
}

// Create inline-space
//
// @param  {Number} inline-space to set
@mixin inline-space($value) {
  margin-right: $value;
  &:last-child {
    margin-right: 0;
  }
}

/* GLOBAL MIXINS
--------------------------------------------- */

/* AUTO SCALING FOR TYPE WITH MIN/MAX SIZES

  @param {Number}  $responsive  - Viewport-based size
  @param {Number}  $min         - Minimum font size (px)
  @param {Number}  $max         - Maximum font size (px) (optional)

  @param {Number}  $fallback    - Fallback for viewport-based units (optional)

  @example SCSS - 5vw size, 35px min & 150px max size + 50px fallback:

  @include responsive-font(5vw, 35px, 150px, 50px);
*/
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == "vh", "height", "width");
  $min-breakpoint: $min / $responsive-unitless * 100;

  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }

  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;

    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }

  @if $fallback {
    font-size: $fallback;
  }

  font-size: $responsive;
}

// Reset
@mixin reset {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

// Used to prevent text selection on an element
@mixin prevent-user-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/// Used to hide an element visually, but keeping it accessible for
/// accessibility tools.
@mixin visually-hidden {
  // Need to make sure we override any existing styles.
  position: absolute !important;
  top: 0;
  clip: rect(1px, 1px, 1px, 1px) !important;
  overflow: hidden !important;
  height: 1px !important;
  width: 1px !important;
  padding: 0 !important;
  border: 0 !important;
}

/// To be used on flex items. Resolves some common layout issues, such as
/// text truncation not respecting padding or breaking out of container.
/// https://css-tricks.com/flexbox-truncated-text/
@mixin layout-flex-fix {
  min-width: 0;
  max-width: 100%;
}


@function set-color-based-on-luminence($color: nth($status, 1)) {
  @if (lightness($color) > 60) {
    @return $color-lh-rich-black; // Lighter background, return dark color
  } @else {
    @return $color-white; // Darker background, return light color
  }
}

/* GLOBAL FUNCTIONS
--------------------------------------------- */

// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 200;
@function color-yiq($color) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);

  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

  @if ($yiq >= $yiq-contrasted-threshold) {
    @return $color-oil;
  } @else {
    @return $color-white;
  }
}

// Create a tint
//
// @param  {Color}  $color to tint
// @param  {Number} $percentage of `$color` in returned color
// @return {Color}
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

// Create a shade
//
// @param  {Color}  $color to shade
// @param  {Number} $percentage of `$color` in returned color
// @return {Color}
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

// Calculate color difference
// See https://www.w3.org/TR/AERT/#color-contrast for algorithm
//
// @param  {Color} $color of foreground
// @param  {Color} $color of background
// @return {Boolean}
@function color-difference($foreground, $background) {
  $r: (max(red($foreground), red($background))) - (min(red($foreground), red($background)));
  $g: (max(green($foreground), green($background))) - (min(green($foreground), green($background)));
  $b: (max(blue($foreground), blue($background))) - (min(blue($foreground), blue($background)));
  $sum-rgb: $r + $g + $b;

  @if $sum-rgb < 350 {
    @return "false";
  } @else {
    @return "true";
  }
}

// Set text color based on contrast
//
// @param  {Color}  $color to set
// @param  {Color}  $background color to test
// @param  {Color}  $fallback color to set in case contrast check fails
@function set-text-color($color, $background, $fallback: null) {
  @if $fallback == null {
    $fallback: #000;
  }
  @if (color-difference($color, $background) == "false") {
    @return $fallback;
  } @else {
    @return $color;
  }
}

/// Darkens the foreground color by the background color. This is the same as the
/// “multiply” filter in graphics apps.
///
/// @param {Color} $foreground - The color to darken.
/// @param {Color} $background - The background to base darkening on.
/// @return {Color} The modified color.
@function color-multiply($foreground, $background: null) {
  @if $background == null {
    $background: #ffffff;
  }

  @return $foreground * $background / 255;
}

/// Returns the value in rem for a given pixel value.
/// @param {Number} $value - The pixel value to be converted.
/// @return {Number} The converted value in rem.
@function rem($value) {
  $unit: unit($value);

  @if $unit == "rem" {
    @return $value;
  } @else if $unit == "px" {
    @return $value / $size-m * 1rem;
  } @else if $unit == "em" {
    @return $unit / 1em * 1rem;
  } @else {
    @error "Value must be in px, em, or rem.";
  }
}

/// Returns the value in pixels for a given rem value.
/// @param {Number} $value - The rem value to be converted.
/// @return {Number} The converted value in pixels.
@function px($value) {
  $unit: unit($value);

  @if $unit == "px" {
    @return $value;
  } @else if $unit == "em" {
    @return ($value / 1em) * $size-m;
  } @else if $unit == "rem" {
    @return ($value / 1rem) * $size-m;
  } @else {
    @error "Value must be in rem, em, or px.";
  }
}

/// Returns the list of available names in a given map.
/// @param {Map} $map - The map of data to list the names from.
/// @param {Number} $map - The level of depth to get names from.
/// @return {String} The list of names in the map.
@function available-names($map, $level: 1) {
  @if type-of($map) != "map" {
    @return null;
  }

  $output: "";
  $newline: "\A ";

  @if $level == 1 {
    @each $key, $value in $map {
      $output: $output + "#{$newline}- #{$key} #{available-names($value, $level + 1)}";
    }
  } @else {
    $output: "(";
    $i: 1;

    @each $key, $value in $map {
      $sep: if($i < length($map), ", ", "");
      $output: $output + "#{$key}#{$sep}#{available-names($value, $level + 1)}";
      $i: $i + 1;
    }

    $output: $output + ")";
  }

  @return $output;
}