$color-surface: rgba(247, 247, 247, 1);
$color-invert: rgba(255, 255, 255, 1);
$color-background-transparent: rgba(255, 255, 255, 0.8);
$color-surface-invert: rgba(255, 255, 255, 0.110);
$color-primary-base: rgba(40, 32, 252, 1);
$color-primary-lighten: rgba(0, 105, 255, 1);
$color-primary-darken: rgba(0, 0, 211, 1);
$color-secondary-base: rgba(0, 230, 202, 1);
$color-secondary-lighten: rgba(196, 252, 239, 1);
$color-secondary-darken: rgba(0, 197, 193, 1);
$color-third-base: rgba(245, 81, 255, 1);
$color-third-lighten: rgba(227, 143, 255, 1);
$color-third-darken: rgba(142, 54, 168, 1);
$color-warning-base: rgba(222, 53, 11, 1);
$color-success-base: rgba(102, 235, 181, 1);
$color-success-darken: rgba(40, 190, 64, 1);
$color-success-lighten: rgba(44, 240, 75, 1);
$color-text-base: rgba(22, 27, 61, 1);
$color-text-lighten: rgba(123, 116, 133, 1);
$color-text-link: rgba(40, 32, 252, 1);
$color-gray-base: rgba(239, 239, 239, 1);
$color-gray-darken: rgba(189, 189, 189, 1);
$color-gray-lighten: rgba(247, 247, 247, 1);


@mixin text-style-heading-h-1 {
  font-size: 96px;
  font-family: "Spartan";
  font-weight: bolder;
  font-style: normal;
  line-height: 128px;
}

@mixin text-style-heading-h-2 {
  font-size: 60px;
  font-family: "Spartan";
  font-weight: bolder;
  font-style: normal;
  line-height: 88px;
}

@mixin text-style-heading-h-3 {
  font-size: 40px;
  font-family: "Spartan";
  font-weight: bolder;
  font-style: normal;
  line-height: 56px;
}

@mixin text-style-heading-h-4 {
  font-size: 30px;
  font-family: "Spartan";
  font-weight: bolder;
  font-style: normal;
  line-height: 44px;
}

@mixin text-style-heading-h-5 {
  font-size: 24px;
  font-family: "Spartan";
  font-weight: bolder;
  font-style: normal;
  line-height: 34px;
}

@mixin text-style-heading-h-6 {
  font-size: 20px;
  font-family: "Spartan";
  font-weight: bolder;
  font-style: normal;
  line-height: 34px;
}

@mixin text-style-text-large-bold {
  font-size: 20px;
  font-family: "Mulish";
  font-weight: bolder;
  font-style: normal;
  line-height: 34px;
}

@mixin text-style-text-large-regular {
  font-size: 22px;
  font-family: "Mulish";
  font-weight: normal;
  font-style: normal;
  line-height: 28px;
}

@mixin text-style-text-large-italic {
  font-size: 20px;
  font-family: "Mulish";
  font-weight: normal;
  font-style: italic;
  line-height: 28px;
}

@mixin text-style-text-normal-bold {
  font-size: 16px;
  font-family: "Mulish";
  font-weight: bolder;
  font-style: normal;
  line-height: 28px;
}

@mixin text-style-text-normal-regular {
  font-size: 18px;
  font-family: "Mulish";
  font-weight: normal;
  font-style: normal;
  line-height: 28px;
}

@mixin text-style-text-normal-italic {
  font-size: 16px;
  font-family: "Mulish";
  font-weight: normal;
  font-style: italic;
  line-height: 28px;
}

@mixin text-style-text-small-bold {
  font-size: 14px;
  font-family: "Mulish";
  font-weight: bolder;
  font-style: normal;
  line-height: 24px;
}

@mixin text-style-text-small-regular {
  font-size: 14px;
  font-family: "Mulish";
  font-weight: normal;
  font-style: normal;
  line-height: 24px;
}

@mixin text-style-text-small-italic {
  font-size: 14px;
  font-family: "Mulish";
  font-weight: normal;
  font-style: italic;
  line-height: 24px;
}

@mixin text-style-text-extra-small-bold {
  font-size: 12px;
  font-family: "Mulish";
  font-weight: normal;
  font-style: normal;
  line-height: 21px;
}

@mixin text-style-text-extra-small-regular {
  font-size: 12px;
  font-family: "Mulish";
  font-weight: normal;
  font-style: normal;
  line-height: 21px;
}

@mixin text-style-text-extra-small-italic {
  font-size: 12px;
  font-family: "Mulish";
  font-weight: normal;
  font-style: italic;
  line-height: 21px;
}

@mixin text-style-text-tiny-bold {
  font-size: 10px;
  font-family: "Mulish";
  font-weight: bolder;
  font-style: normal;
  line-height: 16px;
}

@mixin text-style-text-tiny-regular {
  font-size: 10px;
  font-family: "Mulish";
  font-weight: normal;
  font-style: normal;
  line-height: 16px;
}

@mixin text-style-text-button-large {
  font-size: 20px;
  font-family: "Mulish";
  font-weight: normal;
  font-style: normal;
  line-height: 28px;
}

@mixin text-style-text-button-normal {
  font-size: 16px;
  font-family: "Mulish";
  font-weight: normal;
  font-style: normal;
  line-height: 28px;
}

@mixin text-style-text-button-small {
  font-size: 14px;
  font-family: "Mulish";
  font-weight: normal;
  font-style: normal;
  line-height: 24px;
}

@mixin text-style-text-huge-regular {
  font-size: 24px;
  font-family: "Source Sans Pro";
  font-weight: normal;
  font-style: normal;
  line-height: 36px;
}

@mixin text-style-link-regular {
  font-size: 18px;
  font-family: "Mulish";
  line-height: 28px;
}

@mixin text-style-link-large {
  font-size: 22px;
  font-family: "Mulish";
  line-height: 28px;
}

@mixin text-style-link-medium-heading {
  font-size: 24px;
  font-family: "Mulish";
  font-weight: bolder;
  font-style: normal;
  line-height: 34px;
}

@mixin text-style-link-large-heading {
  font-size: 40px;
  font-family: "Mulish";
  font-weight: bolder;
  font-style: normal;
  line-height: 48px;
}

@mixin text-style-link-small-heading {
  font-size: 20px;
  font-family: "Mulish";
  line-height: 28px;
}

@mixin effect-style-shadow-bottom-1 {
  box-shadow: 0.00px 0.50px 2.00px rgba(96, 97, 112, 0.160), 0.00px 0.00px 1.00px rgba(40, 41, 61, 0.080);
}

@mixin effect-style-shadow-bottom-2 {
  box-shadow: 0.00px 2.00px 4.00px rgba(96, 97, 112, 0.160), 0.00px 0.00px 1.00px rgba(40, 41, 61, 0.040);
}

@mixin effect-style-shadow-bottom-3 {
  box-shadow: 0.00px 2.00px 4.00px rgba(96, 97, 112, 0.160), 0.00px 0.00px 1.00px rgba(40, 41, 61, 0.040);
}

@mixin effect-style-shadow-bottom-4 {
  box-shadow: 0.00px 8.00px 16.00px rgba(96, 97, 112, 0.160), 0.00px 2.00px 4.00px rgba(40, 41, 61, 0.040);
}

@mixin effect-style-shadow-bottom-5 {
  box-shadow: 0.00px 16.00px 24.00px rgba(96, 97, 112, 0.160), 0.00px 2.00px 8.00px rgba(40, 41, 61, 0.040);
}

@mixin effect-style-shadow-top-1 {
  box-shadow: 0.00px -0.50px 2.00px rgba(96, 97, 112, 0.160), 0.00px 0.00px 1.00px rgba(40, 41, 61, 0.080);
}

@mixin effect-style-shadow-top-2 {
  box-shadow: 0.00px -2.00px 4.00px rgba(96, 97, 112, 0.160), 0.00px 0.00px 1.00px rgba(40, 41, 61, 0.040);
}

@mixin effect-style-shadow-top-3 {
  box-shadow: 0.00px -4.00px 8.00px rgba(96, 97, 112, 0.160), 0.00px 0.00px 2.00px rgba(40, 41, 61, 0.040);
}

@mixin effect-style-shadow-top-4 {
  box-shadow: 0.00px -8.00px 16.00px rgba(96, 97, 112, 0.160), 0.00px -2.00px 4.00px rgba(40, 41, 61, 0.040);
}

@mixin effect-style-shadow-top-5 {
  box-shadow: 0.00px -16.00px 24.00px rgba(96, 97, 112, 0.160), 0.00px -2.00px 8.00px rgba(40, 41, 61, 0.040);
}