$varient: "dark";

$white: #e4e6eb;
$white-alt: #b0b3b8;
$black: #000000;
$black-alt: #1d2129;
$red: #f02849;
$red-alt: #f02849;
$green: #30ab5a;
$green-alt: #39b463;
$blue: #1778f2;
$blue-alt: #1d85fc;
$yellow: #dcde81;
$yellow-alt: #808037;
$grey-100: #18191a;
$grey-200: #242526;
$grey-300: #3a3b3c;
$grey-400: #4e4f50;
$grey-500: #606770;
$grey-700: #dadde1;
$grey-800: #f0f2f5;
$grey-900: #fff;

$base: null !default;
$surface0: null !default;
$surface1: null !default;
$surface2: null !default;
$text: null !default;
$subtext: null !default;
$btntext: null !default;

@if $varient == "dark" {
  $base: $grey-100;
  $surface0: $grey-200;
  $surface1: $grey-300;
  $surface2: $grey-400;
  $text: $white;
  $subtext: $white-alt;
  $btntext: $white;
}

@if $varient == "light" {
  $base: $grey-900;
  $surface0: $grey-900;
  $surface1: $grey-800;
  $surface2: $grey-700;
  $text: $black;
  $subtext: $black-alt;
  $btntext: $grey-500;
}

$font: "Helvetica Neue", Helvetica, Verdana, Courier, monospace;
$header-font: "Facebook";

$scale: 16px;
$outer-gap: $scale;
$inner-gap: $scale;
$inner-inner-gap: $scale * 0.75;
$outer-radius: $scale / 2;
$inner-radius: $scale / 3;
$font-size: $scale;
$font-size-small: $scale * 0.75;

$header-height: $scale * 3.5;

$base-z-index: 1;
$header-z-index: 2;
$modal-z-index: 5;

$content-width: $scale * 40;