$font-size: 14px;
$line-height: 1.25;

$h1-font-size: 48px;
$h2-font-size: 36px;
$h3-font-size: 24px;
$h4-font-size: 20px;
$h5-font-size: 17px;
$h6-font-size: 14px;

$body-padding: 28px;
$horizontal-padding: 6px;
$vertical-padding: 14px;
$input-height: 30px;
$tab-height: 41px;
$tab-width: 120px;
$content-width: 1032px;

$faded-opacity: 0.35;
$faded-hover-opacity: 0.55;
$faded-active-opacity: 0.75;

$red: rgb(255, 106, 97);
$yellow: rgb(255, 212, 113);
$green: rgb(148, 228, 109);
$blue: rgb(110, 210, 239);
$violet: rgb(208, 146, 244);

$dark-red: darken($red, 20%);
$dark-yellow: darken($yellow, 20%);
$dark-green: darken($green, 20%);
$dark-blue: darken($blue, 20%);
$dark-violet: darken($violet, 20%);

$rainbow: $red mix($red, $yellow) $yellow mix($yellow, $green) $green
  mix($green, $blue) $blue mix($blue, $violet) $violet mix($violet, $red);

$black-text: #222;
$light-gray-text: #bbb;

$master-color: $green;
$master-dark-color: $dark-green;
$master-text-color: saturate(darken($master-color, 35%), 30%);
$master-text-dark-color: saturate(darken($master-color, 42%), 30%);

$highlight-border-color: $master-color;
$highlight-color: transparentize($highlight-border-color, 0.75);
$highlight-hover-color: transparentize($highlight-border-color, 0.9);
$highlight-hover-border-color: transparentize($highlight-border-color, 0.4);
$highlight-active-color: transparentize($highlight-border-color, 0.83);
$highlight-active-border-color: transparentize($highlight-border-color, 0.2);

$border-radius: 2px;
$border-color: #bbb;
$border-color-active: darken($border-color, 10%);
$border-color-master: darken($master-color, 20%);