// GLOBAL VARIABLES
$base-spacing: 16px;
$base-spacing-1-8th: $base-spacing / 8; // 2px
$base-spacing-1-4th: $base-spacing / 4; // 4px
$base-spacing-half: $base-spacing / 2; // 8px
$base-spacing-3-4th: $base-spacing * 3/4; // 12px
$base-spacing-1-half: $base-spacing * 3/2; // 24px
$base-spacing-2x: $base-spacing * 2; // 32px
$base-spacing-3x: $base-spacing * 3; // 48px
$base-spacing-4x: $base-spacing * 4; // 64px
$base-spacing-4-half: $base-spacing * 9/2; // 72px

$base-spacing-map: (
  '1x': $base-spacing,
  '1-8th': $base-spacing-1-8th,
  '1-4th': $base-spacing-1-4th,
  'half': $base-spacing-half,
  '3-4th': $base-spacing-3-4th,
  '1-half': $base-spacing-1-half,
  '2x': $base-spacing-2x,
  '3x': $base-spacing-3x,
  '4x': $base-spacing-4x,
  '4-half': $base-spacing-4-half,
  'none': 0
);

$base-elevation: 0 2px 4px rgba(0, 0, 0, 0.08);
$base-elevation-card: 0 2px 4px rgba(0, 0, 0, 0.16);
$base-elevation-card-dark: 0 2px 4px rgba(0, 0, 0, 0.2);
$base-elevation-menu: 0 2px 4px rgba(0, 0, 0, 0.2);
$base-elevation-modal: 0 2px 4px rgba(0, 0, 0, 0.24);

$base-hover-animation: background-color ease 0.5s;

$base-font-size: 16px;
$base-font-header: $base-font-size * 0.875; // 14px
$base-font-site: $base-font-size * 1.125; // 18px

$base-font-family: "Arrow Display", Helvetica, Arial, sans-serif;

$base-state-info: #FFC845;
$base-state-info-lt: #FFE3A2;
$base-state-success: #008445;
$base-state-success-lt: #7FC1A1;
$base-state-error: #C92428;
$base-state-error-lt: #E49193;

// whenever new color is added, need to update in the $colors-map below
$base-white: #FFFFFF;
$base-white-10p: #FFFFFF1a;
$base-white-20p: #FFFFFF33;
$base-black: #000000;
$base-black-10p: #0000001a;
$base-black-20p: #00000033;

// whenever new color is added, need to update in the $colors-map below
$sky-blue-100: #BFE0F4;
$sky-blue-200: #7FC1EA;
$sky-blue-300: #40A3E0;
$sky-blue-400: #0084D5;
$sky-blue-500: #0069AA;
$sky-blue-500-10p: #0069AA1a;
$sky-blue-500-20p: #0069AA33;
$sky-blue-500-25p: #0069AA40;
$sky-blue-600: #004E7F;
$sky-blue-700: #003353;

// whenever new color is added, need to update in the $colors-map below
$patina-green-100: #D1F5EA;
$patina-green-200: #A3EBD5;
$patina-green-300: #75E1C1;
$patina-green-400: #47D7AC;
$patina-green-500: #35A885;
$patina-green-600: #23795F;
$patina-green-700: #114B3B;

// whenever new color is added, need to update in the $colors-map below
$gallery-100: #F0F0F0;
$alto-200: #DEDEDE;
$nobel-300: #B3B3B3;
$nobel-300-25p: #B3B3B340;
$boulder-400: #757575;
$tundra-500: #505050;
$tundra-500-10p: #5050501a;
$tundra-500-20p: #50505033;
$tundra-500-25p: #50505040;
$baltic-sea-600: #29272A;
$jaguar-700: #141314;

// whenever new color is added, need to update in the $colors-map below
$copper-yellow-100: #FFF1D0;
$copper-yellow-200: #FFE3A2;
$copper-yellow-300: #FFD674;
$copper-yellow-400: #FFC845;
$copper-yellow-500: #C69A33;
$copper-yellow-600: #8D6D22;
$copper-yellow-700: #544011;

// whenever new color is added, need to update in the $colors-map below
$solar-orange-100: #FFE1DC;
$solar-orange-200: #FFC2B9;
$solar-orange-300: #FFA497;
$solar-orange-400: #FF8674;
$solar-orange-500: #CB6657;
$solar-orange-600: #98463A;
$solar-orange-700: #67261D;

// status colors
$red-maple: #EAA8A9;
$sagano: #99CEB5;
$laguna: #FFE9B5;
$grey: #616161;

$status-map: (
  draft: $sky-blue-200,
  cancelled: $solar-orange-400,
  active: $patina-green-400,
  pending-action: $boulder-400,
  pending: $boulder-400,
  on-hold: $copper-yellow-200,
  finalized: $sky-blue-400,
  finalizing: $sky-blue-300,
  credit-approved: $copper-yellow-300,
  credit-rejected: $solar-orange-300,
);

$bg-map: (
  gallery: $gallery-100,
  alto: $alto-200,
  nobel: $nobel-300,
  boulder: $boulder-400,
  tundra: $tundra-500,
  baltic-sea: $baltic-sea-600,
  jaguar: $jaguar-700,
  red: $base-state-error,
  yellow: $copper-yellow-500,
  green: $base-state-success,
);

$colors-map: (
  white: $base-white,
  white-10p: $base-white-10p,
  white-20p: $base-white-20p,
  black: $base-black,
  black-10p: $base-black-10p,
  black-20p: $base-black-20p,

  sky-blue-100: $sky-blue-100,
  sky-blue-200: $sky-blue-200,
  sky-blue-300: $sky-blue-300,
  sky-blue-400: $sky-blue-400,
  sky-blue-500: $sky-blue-500,
  sky-blue-500-10p: $sky-blue-500-10p,
  sky-blue-500-20p: $sky-blue-500-20p,
  sky-blue-600: $sky-blue-600,
  sky-blue-700: $sky-blue-700,

  patina-green-100: $patina-green-100,
  patina-green-200: $patina-green-200,
  patina-green-300: $patina-green-300,
  patina-green-400: $patina-green-400,
  patina-green-500: $patina-green-500,
  patina-green-600: $patina-green-600,
  patina-green-700: $patina-green-700,

  gallery-100: $gallery-100,
  alto-200: $alto-200,
  nobel-300: $nobel-300,
  boulder-400: $boulder-400,
  tundra-500: $tundra-500,
  tundra-500-10p: $tundra-500-10p,
  tundra-500-20p: $tundra-500-20p,
  baltic-sea-600: $baltic-sea-600,
  jaguar-700: $jaguar-700,

  copper-yellow-100: $copper-yellow-100,
  copper-yellow-200: $copper-yellow-200,
  copper-yellow-300: $copper-yellow-300,
  copper-yellow-400: $copper-yellow-400,
  copper-yellow-500: $copper-yellow-500,
  copper-yellow-600: $copper-yellow-600,
  copper-yellow-700: $copper-yellow-700,

  solar-orange-100: $solar-orange-100,
  solar-orange-200: $solar-orange-200,
  solar-orange-300: $solar-orange-300,
  solar-orange-400: $solar-orange-400,
  solar-orange-500: $solar-orange-500,
  solar-orange-600: $solar-orange-600,
  solar-orange-700: $solar-orange-700,

  grey:$grey,
);

$base-heading-line-height: 1.25;
$base-paragraph-line-height: 1.5;

$base-breakpoints: (
  sm: 0,
  md: 576px,
  lg: 991px,
  lm: 1240px,
  xl: 1440px,
  xxl: 1680px
) !default;

$base-breakpoints-gutter: (
  sm: 16px,
  md: 24px,
  lg: 24px,
  xl: 24px,
  xxl: 24px
) !default;

$base-breakpoints-outer-margin: (
  sm: 24px,
  md: 32px,
  lg: 32px,
  xl: 32px,
  xxl: 32px
) !default;

$base-breakpoints-col-num: (
  sm: 4,
  md: 8,
  lg: 12,
  xl: 12,
  xxl: 12
) !default;

$base-region-nav-width: 484px;

$base-border-radius: 2px;

$base-primary-button: (
  default: $sky-blue-500,
  hover: $sky-blue-400,
  o-hover-fill: $sky-blue-500-10p,
  o-hover-border: $sky-blue-400,
  active: $sky-blue-500,
  o-active-fill: $sky-blue-500-20p,
  o-active-border: $sky-blue-600
);

$base-secondary-button: (
  default: $tundra-500,
  hover: $boulder-400,
  o-hover-fill: $tundra-500-10p,
  o-hover-border: $tundra-500,
  active: $baltic-sea-600,
  o-active-fill: $tundra-500-20p,
  o-active-border: $tundra-500
);

$base-button-colors: (
  primary: $base-primary-button,
  secondary: $base-secondary-button
);

$dark-button-colors: (
  secondary: $base-secondary-button
);

$base-transition-background: background-color ease 0.3s;