@use 'sass:color';
@use 'sass:math';

$color-1: #3c8dbc;

$aside-width: 230px;
$aside-bg: #222d32;
$header-height: 50px;
$header-bg: $color-1;
$main-bg: #ecf0f5;
$footer-bg: #fff;
$footer-height: 50px;
$gutter: 16px;

$base-font-size: 14px;

$color-blue: #3c8dbc;
$color-blue-dark: color.adjust($color-blue, $lightness: -25%, $space: hsl);
$color-blue-light: color.adjust($color-blue, $lightness: 10%, $space: hsl);
$color-green: #00a65a;
$color-green-dark: color.adjust($color-green, $lightness: -15%, $space: hsl);
$color-green-light: color.adjust($color-green, $lightness: 10%, $space: hsl);
$color-orange: #f39c12;
$color-red: #dd4b39;
$color-red-dark: color.adjust($color-red, $lightness: -20%, $space: hsl);
$color-red-light: color.adjust($color-red, $lightness: 20%, $space: hsl);
$color-black: #333;
$color-light-grey: #f4f4f4;

$body-font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$body-font-color: $color-black;
$heading-font-family: 'Heebo', sans-serif;
$base-font-size: 14px;
$base-line-height: 1.4;
$content-max-width: 1280px;

$button-height-small: 40px;
$button-height: 50px;

// FORM
$form-border-color: #d2d6de;
$form-element-padding: 9px;
$form-label-margin: 6px;

// old
$form-error-label-transition-duration: 0.3s;
$form-field-margin: math.div($gutter, 2);
$form-focus-transition-duration: 0.2s;
$form-focused-color: $color-blue;
$form-font-color: $color-black;
$form-icon-size: 20px;
$form-icon-transition-duration: 0.5s;
$form-input-height: 50px;
$form-input-padding: 16px $form-icon-size + 10px * 2 0 12px;
$form-invalid-color: $color-red;
$form-valid-color: $color-green;