HabitatMap/AirCasting

// colors
$blue: #00b2ef;
$dark-grey: #6b6d7c;
$dark-blue: #242a3f;
$grey-text: #a3a0a4;
$separator-color: #cbcaca;
$separator-color-light: rgba(203, 202, 202, 0.6);
$text-color: #757575;
$cta-color: #ffe651;

// colors - from HM
$white: #ffffff;
$gray: #818181;
$gray-dark: #474c55;
$gray-input: rgb(121, 125, 130);

// heatmap colors
// the same colors are used in marker svgs and theme.js
$green: #96d788; // rgb(150, 215, 136)
$yellow: #ffd960; // rgb(255, 217, 96)
$orange: #fca443; // rgb(252, 164, 67)
$red: #e95f5f; // rgb(233, 95, 95)
$grey: lighten($dark-grey, 20%); // #a0a2ad

// heatmap colors - blue theme
$teal: #81dbcb; // rgb(129, 219, 203)
$light-blue: #4ebcd5; // rgb(78, 188, 213)
$gray-blue: #2a70b8; // rgb(42, 112, 184)
$indigo: #19237e; // rgb(25, 35, 126)

.root {
  --level1-colour: 150, 215, 136;
  --level2-colour: 255, 217, 96;
  --level3-colour: 252, 164, 67;
  --level4-colour: 233, 95, 95;
}

.default {
  --level1-colour: 150, 215, 136;
  --level2-colour: 255, 217, 96;
  --level3-colour: 252, 164, 67;
  --level4-colour: 233, 95, 95;
}

.blue {
  --level1-colour: 129, 219, 203;
  --level2-colour: 78, 188, 213;
  --level3-colour: 42, 112, 184;
  --level4-colour: 25, 35, 126;
}

// ui colors
$brand-primary: $blue;
$brand-secondary: $dark-blue;
$navy-font: #3e4970;
$cta-color: #ffe651;

$shadow-color: rgba(149, 149, 149, 0.5);
$shadow-color-blue: rgba(160, 192, 290, 0.5);
$shadow-color-lighter: rgba(149, 149, 149, 0.3);
$shadow-color-dark: rgba(51, 51, 51, 0.2);
$shadow-color-darker: rgba(166, 166, 166, 0.5);
$shadow-color-delicate: rgba(215, 215, 215, 0.5);

$basic-shadow: 0px 2px 4px 0px $shadow-color;
$darker-shadow: 0px 2px 4px 0px $shadow-color-darker;
$lighter-shadow: 0px 2px 4px 0px $shadow-color-lighter;
$delicate-shadow: 1px 1px 8px 0 $shadow-color-delicate;
$header-shadow: 0 5px 3px -4px rgba(51, 51, 51, 0.1);
$heatmap-shadow: 0 -5px 3px -4px rgba(51, 51, 51, 0.1);

// element sizes
$nav-height: 80px;
$nav-height-mobile: 72px;
$filters-width: 250px;
$heatmap-height: 65px;
$heatmap-height-mobile: 50px;
$logo-width: 110px;
$sessions-list-width: 238px;
$sessions-list-height: 160px;
$action-container-height: 60px;
$session-type-nav-height: 45px;

// spacing
$input-padding: 7px;
$margin-default: 12px;

// spacing - from HM
$u-space-tiny: 0.5rem;
$u-space-small: 1.5rem;
$u-space-default: 3rem;
$u-space-big: 6rem;
$u-space-huge: 10rem;

// typography
$tiny-font: 12px;
$small-font: 14px;
$medium-font: 18px;

$font-stack-regular: 400;
$font-stack-bold: 700;

// typographic defaults - from HM
$base-font-size-2: 0.812rem; // 13px
$base-font-size-1: 0.875rem; // 14px
$base-font-size: 16px;
$base-font-size1: 1.187rem; // 19px
$base-font-size2: 1.5rem; // 24px
$base-font-size3: 1.75rem; // 28px
$base-font-size4: 2.75rem; // 44px

// fonts - from HM
$bold-font: "Moderat-Bold", sans-serif;
$body-font: "Muli", sans-serif;

// z-index
$sessions-z-index: 4;
$heatmap-z-index: $sessions-z-index;

$full-overlay-z-index: $sessions-z-index + 1;
$partial-overlay-z-index: $heatmap-z-index - 1;

$overlay-info-z-index: $full-overlay-z-index + 1;
$filters-z-index: $overlay-info-z-index + 1;
$popup-z-index: $filters-z-index + 1;

$header-z-index: 999;
$mobile-filters-z-index: $header-z-index + 1;

// breakpoints
$large-desktop-min: 1920px;
$desktop-max: $large-desktop-min - 1px;
$desktop-min: 1366px;
$small-desktop-max: $desktop-min - 1px;
$small-desktop-min: 1025px;
$tablet-max: $small-desktop-min - 1px;
$tablet-min: 768px;
$large-mobile-max: $tablet-min - 1px;
$large-mobile-min: 480px;
$wider-mobile: 850px; // specific to maps

// other
$basic-radius: 8px;
$input-radius: 6px;
$nav-font-size-desktop: $base-font-size1;
$subnav-font-size-desktop: $base-font-size;