//**********************
/* MAIN VARIABLES
***********************/
$blackpearl: hsl(206, 20%, 7%);
$woodsmoke: hsl(200, 7%, 8%);
$shark: hsl(207, 13%, 14%);

$abbey: hsl(205, 7%, 40%);
$raven: lighten($abbey, 8%);
$oslo: lighten($abbey, 18%);
$mischka: lighten($abbey, 28%);
$ghost: lighten($abbey, 38%);
$iron: lighten($abbey, 46%);
$porcelain: lighten($abbey, 55%);

$white: hsl(0, 0%, 100%);

$summer: hsl(201, 66%, 54%);
$summer-dark: darken($summer, 8%);
$summer-darker: darken($summer, 16%);
$summer-light: lighten($summer, 8%);
$summer-lighter: lighten($summer, 16%);

$shamrock: hsl(166, 66%, 54%);
$shamrock-dark: darken($shamrock, 8%);
$shamrock-darker: darken($shamrock, 16%);
$shamrock-light: lighten($shamrock, 8%);
$shamrock-lighter: lighten($shamrock, 16%);

$tulip: hsl(47, 82%, 54%);
$tulip-dark: darken($tulip, 8%);
$tulip-darker: darken($tulip, 16%);
$tulip-light: lighten($tulip, 8%);
$tulip-lighter: lighten($tulip, 16%);

$flame: hsl(0, 66%, 54%);
$flame-dark: darken($flame, 8%);
$flame-darker: darken($flame, 16%);
$flame-light: lighten($flame, 8%);
$flame-lighter: lighten($flame, 16%);

$font-size: 1.6rem;
$font-size-s: 1.4rem;
$font-size-m: 1.8rem;

$font-thin: lighter;
$font-normal: normal;
$font-bold: bold;

$font-family-general: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
  Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
$font-family: "Catamaran", sans-serif;

$heading-1: $font-size * 2.75;
$heading-2: $font-size * 2.25;
$heading-3: $font-size * 1.75;
$heading-4: $font-size * 1.5;
$heading-5: $font-size * 1.125;
$heading-6: $font-size * 1;

$space-xxs: 0.2rem;
$space-xs: 0.4rem;
$space-s: 0.8rem;
$space: 1.2rem;
$space-m: 1.6rem;
$space-l: 2.4rem;
$space-xl: 3.2rem;
$space-xxl: 6.4rem;

$line-height-s: 1.2;
$line-height: 1.5;
$line-height-m: 1.6;
$line-height-l: 1.7;

$el-height: 3.8rem;
$el-height-s: 3.1rem;
$el-height-l: 4.2rem;

$border-radius: 0.2rem;
$border-radius-full: 50%;

$transition-default: all 0.15s ease-in;
$transition-secondary: all 0.3s ease-in;
$transparent: transparent;

$progress-bar: 1.4rem;
$progress-bar-s: 1rem;
$progress-bar-l: 2rem;

$progress-circle: 6rem;
$progress-circle-s: 3rem;
$progress-circle-l: 8rem;

//**********************
/* DERIVED VARIABLES
***********************/

$color-background: $white;
$color-font: $abbey;
$color-font-secondary: $oslo;
$color-font-revert: $porcelain;
$color-main: $abbey;
$color-secondary: $raven;
$color-lighter: $porcelain;
$color-light: $iron;

$color-blue: $summer;
$color-blue-light: $summer-light;
$color-blue-lighter: $summer-lighter;
$color-blue-dark: $summer-dark;
$color-blue-darker: $summer-darker;

$color-yellow: $tulip;
$color-yellow-light: $tulip-light;
$color-yellow-lighter: $tulip-lighter;
$color-yellow-dark: $tulip-dark;
$color-yellow-darker: $tulip-darker;

$color-green: $shamrock;
$color-green-light: $shamrock-light;
$color-green-lighter: $shamrock-lighter;
$color-green-dark: $shamrock-dark;
$color-green-darker: $shamrock-darker;

$color-red: $flame;
$color-red-light: $flame-light;
$color-red-lighter: $flame-lighter;
$color-red-dark: $flame-dark;
$color-red-darker: $flame-darker;

$color-mute: $ghost;
$color-mark: $tulip-light;
$color-code: $porcelain;
$color-button-font: $white;
$color-alert: $raven;
$color-alert-font: $porcelain;
$color-link-font: $oslo;
$color-link-hover: $color-main;

$color-border: $iron;
$color-border-dark: $raven;
$color-switch-bg: $mischka;

$p-size: $font-size * 1;
$p-s-size: $font-size * 0.8125;
$p-l-size: $font-size * 1.125;

$el-font-size: $font-size * 0.8125;
$el-font-size-s: $font-size * 0.6875;
$el-font-size-l: $font-size * 0.9375;

$content-padding-inline: $space-xl;
$content-padding-block: $space-m;

$color-input-disabled: $color-lighter;
$color-input-placeholder: $mischka;

$el-box-shadow: 0 0 3px 1px rgba($color-main, 0.5);
$el-box-shadow-blue: 0 0 3px 1px rgba($color-blue, 0.5);
$el-box-shadow-green: 0 0 3px 1px rgba($color-green, 0.5);
$el-box-shadow-yellow: 0 0 3px 1px rgba($color-yellow, 0.5);
$el-box-shadow-red: 0 0 3px 1px rgba($color-red, 0.5);

//**********************
/* DARK THEME
***********************/

$color-font-dt: $iron;
$color-font-secondary-dt: $ghost;
$color-font-revert-dt: $woodsmoke;
$color-background-dt: $woodsmoke;
$color-main-dt: $raven;
$color-secondary-dt: $oslo;
$color-button-font-dt: $woodsmoke;
$color-border-dt: $abbey;
$color-border-light-dt: $oslo;
$color-code-dt: $shark;
$color-mute-dt: darken($abbey, 8%);
$color-alert-dt: $oslo;
$color-alert-font-dt: $shark;
$color-card-dt: $shark;
$color-link-font-dt: $oslo;
$color-link-hover-dt: $ghost;
$color-input-disabled-dt: rgba($iron, 0.2);
$color-input-placeholder-dt: $abbey;

//**********************
/* BREAKPOINTS
***********************/
$breakpoint-xl: 120em; //1920px // tv, big monitors
$breakpoint-l: 75em; //1200px // tablet land
$breakpoint-m: 62.5em; //1000px // tablet mid
$breakpoint-s: 50em; //800px // tablet
$breakpoint-xs: 37.5em; //600px // mobile

$search-icon: "data:image/svg+xml,%3Csvg width='14' height='15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.643 6.107a3.755 3.755 0 01-3.75 3.75 3.755 3.755 0 01-3.75-3.75 3.755 3.755 0 013.75-3.75 3.755 3.755 0 013.75 3.75zm4.286 6.965c0-.285-.118-.561-.31-.754l-2.871-2.87A5.89 5.89 0 005.893.214 5.89 5.89 0 000 6.106a5.89 5.89 0 009.233 4.855l2.87 2.863c.193.2.47.318.754.318.586 0 1.072-.486 1.072-1.072z' fill='%236F7880'/%3E%3C/svg%3E";