$black: #000000;
$dark: #0d0e0e;

$white: #ffffff;
$light: #f4f5f6;

$transparent: #00000000;

$grey-1: #505050;
$grey-2: #2f2f2f;
$grey-3: #777777;
$grey-4: #b7b7b7;
$grey-5: #cfcfcf;
$grey-6: #efefef;

$blue-1: #02203c;
$blue-2: #0c3f6f;
$blue-3: #8cc4f9;

$green-1: #233b08;
$green-2: #9ae346;
$green-3: #29c01b;

$red-1: #5e0618;
$red-2: #f44064;
$red-3: #e33526;
$red-4: #ff6868;

$yellow-1: #f4d33e;
$yellow-2: #dbb311;
$yellow-3: #493b05;
$yellow-4: #efde7e;

$LIGHT: (
  accent1: $white,
  accent2: $light,
  accent3: #f7f7f7,
  contrast1: $black,
  contrast2: $dark,
  accent1Opacity10: rgba(255, 255, 255, 0.1),
  accent1Opacity20: rgba(255, 255, 255, 0.2),
  accent1Opacity30: rgba(255, 255, 255, 0.3),
  accent1Opacity40: rgba(255, 255, 255, 0.4),
  accent1Opacity50: rgba(255, 255, 255, 0.5),
  accent1Opacity60: rgba(255, 255, 255, 0.6),
  accent1Opacity70: rgba(255, 255, 255, 0.7),
  accent1Opacity80: rgba(255, 255, 255, 0.8),
  accent1Opacity90: rgba(255, 255, 255, 0.9),
  contrast1Opacity10: rgba(0, 0, 0, 0.1),
  contrast1Opacity20: rgba(0, 0, 0, 0.2),
  contrast1Opacity30: rgba(0, 0, 0, 0.3),
  contrast1Opacity40: rgba(0, 0, 0, 0.4),
  contrast1Opacity50: rgba(0, 0, 0, 0.5),
  contrast1Opacity60: rgba(0, 0, 0, 0.6),
  contrast1Opacity70: rgba(0, 0, 0, 0.7),
  contrast1Opacity80: rgba(0, 0, 0, 0.8),
  contrast1Opacity90: rgba(0, 0, 0, 0.9),
  contrast3:
    rgba(
      $color: $dark,
      $alpha: 0.75,
    ),
  divider:
    rgba(
      $color: $dark,
      $alpha: 0.1,
    ),
  iconButton:
    rgba(
      $color: $black,
      $alpha: 0.1,
    ),
  grey1: rgba(225, 225, 225, 0.25),
  grey2: rgba(240, 240, 240, 0.2),
  grey3: rgba(200, 200, 200, 0.5),
  grey4: rgba(230, 230, 230, 1),
  grey5: rgba(240, 240, 240, 1),
  grey6: rgba(100, 100, 100, 1),
  grey7: rgba(210, 210, 210, 0.95),
  blue1: #214789,
  red1: #9d092b,
  green1: #60a911,
  yellow1: #bbad12,
  blue2: #b9d1fb,
  red2: #f4aabb,
  green2: #c9f699,
  yellow2: #f5ed95,
  errorScreenBG: linear-gradient(40deg, #dfe6f3, #e5daf6, $light),
  // ------ exercise values ------
  ePrimary: #1f9fc5,
  ePrimaryMuted: #e4eff1,
  ePrimaryContrast: #062237,
  ePrimaryDeep: #1690ee,
  ePrimaryDark: #092f4d,
  eSecondary: #75d30b,
  eSecondaryMuted: #e7ede0,
  eSecondaryContrast: #043825,
  eSecondaryDeep: #0fbe7e,
  eSecondaryDark: #083626,

  eSignupForm: rgba(215, 215, 215, 0.25),
  eTodoItem: #4a0b91,
);

$DARK: (
  accent1: $black,
  accent2: $dark,
  accent3: #171717,
  contrast1: $white,
  contrast2: $light,
  accent1Opacity10: rgba(0, 0, 0, 0.1),
  accent1Opacity20: rgba(0, 0, 0, 0.2),
  accent1Opacity30: rgba(0, 0, 0, 0.3),
  accent1Opacity40: rgba(0, 0, 0, 0.4),
  accent1Opacity50: rgba(0, 0, 0, 0.5),
  accent1Opacity60: rgba(0, 0, 0, 0.6),
  accent1Opacity70: rgba(0, 0, 0, 0.7),
  accent1Opacity80: rgba(0, 0, 0, 0.8),
  accent1Opacity90: rgba(0, 0, 0, 0.9),
  contrast1Opacity10: rgba(255, 255, 255, 0.1),
  contrast1Opacity20: rgba(255, 255, 255, 0.2),
  contrast1Opacity30: rgba(255, 255, 255, 0.3),
  contrast1Opacity40: rgba(255, 255, 255, 0.4),
  contrast1Opacity50: rgba(255, 255, 255, 0.5),
  contrast1Opacity60: rgba(255, 255, 255, 0.6),
  contrast1Opacity70: rgba(255, 255, 255, 0.7),
  contrast1Opacity80: rgba(255, 255, 255, 0.8),
  contrast1Opacity90: rgba(255, 255, 255, 0.9),
  contrast3:
    rgba(
      $color: $light,
      $alpha: 0.75,
    ),
  divider:
    rgba(
      $color: $light,
      $alpha: 0.1,
    ),
  iconButton:
    rgba(
      $color: $white,
      $alpha: 0.1,
    ),
  grey1: rgba(100, 100, 100, 0.25),
  grey2: rgba(75, 75, 75, 0.2),
  grey3: rgba(75, 75, 75, 0.6),
  grey4: rgba(50, 50, 50, 1),
  grey5: rgba(30, 30, 30, 1),
  grey6: rgba(150, 150, 150, 1),
  grey7: rgba(90, 90, 90, 0.9),
  blue1: #7cb9e8,
  red1: #f55757,
  green1: #93f30c,
  yellow1: #f2e639,
  blue2: #08275d,
  red2: #5c0a1d,
  green2: #1f3408,
  yellow2: #3d390a,
  errorScreenBG: linear-gradient(40deg, #021026, #0e021f, $dark),
  // ------ exercise values ------
  ePrimary: #55c1e2,
  ePrimaryMuted: #19232a,
  ePrimaryContrast: #b7ddfb,
  ePrimaryDeep: #16517f,
  ePrimaryDark: #052c49,
  eSecondary: #a3f545,
  eSecondaryMuted: #141f18,
  eSecondaryContrast: #bef6d2,
  eSecondaryDeep: #106244,
  eSecondaryDark: #042519,

  eSignupForm: rgba(0, 0, 0, 0.25),
  eTodoItem: #722dc0,
);

$themes: ($LIGHT, $DARK);

$eStopWatch: #f46e26;
$ePigHead: #ffc0cb;
$ePigNose: #f57187;
$eProductBlue: #8c96f6;
$eProductRed: #e64970;
$eProductOrange: #f37f1b;
$eProductBrightRed: #f21b3e;
$eProductGreen: #25b59b;
$eProductSelected: #279600;
$eEmojiBg: #a4d9eb;
$eEmojiBorder: #9bbcc2;
$eEmojiStickBg: #808080;
$eEmojiBulbBg: #ffa500;
$eEmojiEarBg: #c90a0a;
$eEmojiEyeBorder: #00b3ff;
$eEmojiMouthBg: #dedede;
$eCandidates: #061802;
