/**
  * px to rem utility
  */

$fhi-core-px: 0.0625rem;

/**
  * Spacing
  * - used for margin, padding, and also height and width
  */

$fhi-core-space-1: $fhi-core-px * 4; // xxs
$fhi-core-space-2: $fhi-core-px * 8; // xs
$fhi-core-space-3: $fhi-core-px * 16; // sm
$fhi-core-space-4: $fhi-core-px * 24; // md
$fhi-core-space-5: $fhi-core-px * 32; // lg
$fhi-core-space-6: $fhi-core-px * 40; // xl
$fhi-core-space-7: $fhi-core-px * 56; // xxl

/**
  * Grid
  */

$fhi-core-container-padding-xxs: $fhi-core-space-2;
$fhi-core-container-padding-xs: $fhi-core-space-3;

/**
  * Typography
  */

$fhi-core-font-size-0: $fhi-core-px * 12;
$fhi-core-font-size-1: $fhi-core-px * 15;
$fhi-core-font-size-2: $fhi-core-px * 17;
$fhi-core-font-size-3: $fhi-core-px * 19;
$fhi-core-font-size-4: $fhi-core-px * 22;
$fhi-core-font-size-5: $fhi-core-px * 25;
$fhi-core-font-size-6: $fhi-core-px * 28;
$fhi-core-font-size-7: $fhi-core-px * 36;
$fhi-core-font-size-8: $fhi-core-px * 44;
$fhi-core-font-size-9: $fhi-core-px * 48;

$fhi-core-font-family-sans-serif: "Lato", sans-serif;

/**
  * All colors used by FHI
  */

$fhi-core-white: white;

$fhi-core-grey-light-1: #fbfbfb;
$fhi-core-grey-light-2: #f7f6f5;
$fhi-core-grey-light-3: #f0edeb;
$fhi-core-grey-light-4: #e0dddb;

$fhi-core-grey-1: #cfd0cb;
$fhi-core-grey-3: #767676;
$fhi-core-grey-4: #222222;

$fhi-core-charcoal-1: #333841;

$fhi-core-blue-grey-2: #edf4f7;
$fhi-core-blue-grey-3: #dbe6ec;
$fhi-core-blue-grey-4: #cbd9df;
$fhi-core-blue-grey-6: #879ba5;
$fhi-core-blue-grey-7: #435c68;

$fhi-core-blue-1: #0067c4;
$fhi-core-blue-2: #0e4485;
$fhi-core-blue-3: #393c61;

$fhi-core-green-1: #cceee4;
$fhi-core-green-2: #04ab79;

$fhi-core-orange-1: #feeed9;
$fhi-core-orange-2: #f7b665;

$fhi-core-red-1: #f86559;
$fhi-core-red-2: #d14641;

$fhi-core-pink-dark-1: #de2968;

$fhi-core-pink-light-1: #ffe3e2;

/**
  * Forms
  */

$fhi-core-input-height: $fhi-core-px * 40;

/**
  * filter calculation made using https://codepen.io/sosuke/pen/Pjoqqp
  */

// $fhi-core-red-1
$fhi-core-red-filter: invert(58%) sepia(58%) saturate(4463%) hue-rotate(328deg)
    brightness(106%) contrast(94%);

// $fhi-core-green-2
$fhi-core-green-filter: invert(47%) sepia(25%) saturate(5597%)
    hue-rotate(134deg) brightness(94%) contrast(97%);

// $fhi-core-pink-dark-1
$fhi-core-pink-filter: invert(26%) sepia(31%) saturate(7486%) hue-rotate(325deg)
    brightness(91%) contrast(90%);

// $fhi-core-orange-2
$fhi-core-orange-filter: invert(77%) sepia(38%) saturate(808%)
    hue-rotate(328deg) brightness(105%) contrast(94%);

// $fhi-core-blue-1
$fhi-core-blue-filter: invert(21%) sepia(91%) saturate(2644%) hue-rotate(195deg)
    brightness(95%) contrast(104%);