Variables

// HEX Colors
$white                       : #ffffff !default;
$black                       : #000000 !default;
$red                         : #e62325 !default;
$orange                      : #e76d04 !default;
$orange-dark                 : #cd7803 !default;
$yellow                      : #ffd500 !default;
$green                       : #60ae19 !default;
$blue-dark                   : #022d62 !default;
$blue                        : #4e9cda !default;
$blue-light                  : #d9eefd !default;
$bright-sky-blue             : #163583 !default;
$brown                       : #865b3c !default;
$teal                        : #0194ab !default;
$pink                        : #e73193 !default;
$purple                      : #613d7c !default;
$seafoam-blue                : #77ccb9 !default;
$cyan                        : #8799c1 !default;

// HEX Grayscale colors
$gray-darkest                : #1a1b1d !default;
$gray-darker                 : #444444 !default;
$gray-dark                   : #6e7577 !default;
$gray                        : #d8d8d8 !default;
$gray-light                  : #e9e9e9 !default;
$gray-lighter                : #fbfbfb !default;
$gray-lightest               : #f7f7f9 !default;

// RGB Colors
$rgb-white                   : 255 255 255 !default;
$rgb-black                   : 0 0 0 !default;
$rgb-red                     : 230 35 37 !default;
$rgb-orange                  : 252 146 0 !default;
$rgb-orange-dark             : 205 120 3 !default;
$rgb-yellow                  : 255 213 0 !default;
$rgb-green                   : 134 189 80 !default;
$rgb-gold                    : 180, 133, 76 !default;
$rgb-blue                    : 0 117 228 !default;
$rgb-bright-sky-blue         : 0 184 255 !default;
$rgb-brown                   : 134 91 60 !default;
$rgb-teal                    : 1 148 171 !default;
$rgb-pink                    : 255 91 119 !default;
$rgb-purple                  : 97 61 124 !default;
$rgb-seafoam-blue            : 119 204 185 !default;
$rgb-gray-darkest            : 26 27 29 !default;
$rgb-gray-darker             : 68 68 68 !default;
$rgb-gray-dark               : 110 117 119 !default;
$rgb-gray                    : 216 216 216 !default;
$rgb-gray-light              : 234 234 234 !default;
$rgb-gray-lighter            : 251 251 251 !default;
$rgb-gray-lightest           : 247 247 247 !default;

// Semantic color scheme
$theme-gold                  : #b4854c !default;
$theme-primary               : $blue !default;
$theme-second                : $green !default;
$theme-tertiary              : #6a708a !default;
$theme-light                 : $blue-light !default;
$theme-dark                  : $black !default;
$color-primary               : $gray-darkest !default;
$color-secondary             : $gray-dark !default;
$color-tertiary              : $theme-primary !default;
$color-success               : $green !default;
$color-info                  : $color-primary !default;
$color-warning               : $red !default;
$color-error                 : $red !default;
$color-inverse               : $gray-dark !default;
$color-focus                 : $bright-sky-blue !default;
$color-rating                : #f6e40e !default;
$color-seondary-light        : #e7f2dc !default;
$color-white                 : $white !default;
$color-black                 : $black !default;
// Background
$bg-color-base               : $white !default;
$bg-color-secondary          : $gray-lighter !default;
$bg-color-dark               : $gray-darkest !default;
$bg-color-tile               : #f1f0f5 !default;

// Border
$border-color-base           : $gray !default;
$border-width-base           : 1px !default;
$border-style-base           : solid !default;
$border-color-secondary      : $gray-dark !default;
$border-width-secondary      : 1px !default;
$border-style-secondary      : solid !default;

$border-base                 : $border-width-base $border-style-base $border-color-base !default;
$border-secondary            : $border-width-secondary $border-style-secondary $border-color-secondary !default;

// Outline
$outline-base                : none !default;

// Focus
$border-focus                : 2px solid $color-focus !default;
$border-focus-dark           : 2px solid $color-primary !default;

// Focus inline
$color-focus-inline          : $color-primary !default;
$color-focus-inline-dark     : $color-primary !default;
$bg-focus-inline             : $color-focus !default;
$bg-focus-inline-dark        : $color-primary !default;
$outline-focus-inline        : 0 !default;
$text-decoration-focus-inline: underline !default;
$focus-outline-offset        : -1px !default;
$focus-input-border          : $border-focus-dark;

// Spacers
$spacer--extra-small         : 4px !default;
$spacer                      : 8px !default;
$spacer--small               : 12px !default;
$spacer--medium              : 16px !default;
$spacer--m                   : 20px !default;
$spacer--semi-medium         : 24px !default;
$spacer--large               : 32px !default;
$spacer--l                   : 36px !default;
$spacer--semi-large          : 40px !default;
$spacer--xl                  : 42px !default;
$spacer--extra-large         : 48px !default;
$spacer--xxl                 : 58px !default;
$spacer--extra-extra-large   : 72px !default;
$spacer--larger              : 80px !default;

$spacer--05                  : 0.5rem !default;
$spacer--1                   : 1rem !default;
$spacer--15                  : 1.5rem !default;
$spacer--2                   : 2rem !default;
$spacer--25                  : 2.5rem !default;
$spacer--3                   : 3rem !default;
$spacer--35                  : 3.5rem !default;
$spacer--4                   : 4rem !default;
$spacer--45                  : 4.5rem !default;
$spacer--5                   : 5rem !default;

// Typography
$font-family-sans-serif      : 'Work Sans', sans-serif !default;
$font-family-serif           : 'Playfair Display', serif !default;
$font-family-monospace       : Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;

$font-family-base            : $font-family-sans-serif !default;
$font-family-secondary       : $font-family-serif !default;

$font-color-base             : $color-primary !default;
$font-weight-normal          : 400 !default;
$font-weight-medium          : 500 !default;
$font-weight-bold            : 700 !default;
$font-weight-base            : $font-weight-normal !default;
$font-line-height            : 1.6 !default;

$font-size-heading-largest          : 40px !default;
$font-size-heading-larger           : 36px !default;
$font-size-heading-large            : 32px !default;
$font-size-heading                  : 28px !default;

$font-size-super-extra-large        : 28px !default;
$font-size-2x-large                 : 24px !default;
$font-size-extra-large              : 22px !default;
$font-size-larger                   : 18px !default;
$font-size-large                    : 17px !default;
$font-size-medium-large             : 16px !default;
$font-size-medium                   : 16px !default;
$font-size-base                     : 14px !default;
$font-size-small                    : 12px !default;
$font-size-extra-small              : 10px !default;

// Z-index
$z-index-lowest              : -1 !default;
$z-index-initial             : auto !default;
$z-index-low                 : 1 !default;
$z-index-normal              : 10 !default;
$z-index-high                : 50 !default;
$z-index-highest             : 99 !default; // reserved for modals - check _modal-variables.scss for more

// Layout
$max-content-width           : 1328px !default;

// Layout - breakpoints
$screen-xs                   : 320px !default;
$screen-s                    : 480px !default;
$screen-m                    : 768px !default;
$screen-l                    : 1024px !default;
$screen-xl                   : 1200px !default;
$screen-2xl                  : 1400px !default;
$screen-xxl                  : 1600px !default;
$screen-3xl                  : 1600px !default;
$screen-xxxl                 : 1920px !default;
$screen-4xl                  : 1920px !default;


// shadow
$shadow                      : 0 2px 6px 0 rgba(0, 0, 0, 0.1) !default;
$darken-layout-hover         : rgba($black, 0.2) !default;

// animations
$animation-position-top      : -300px !default;
$animation-position-right    : -300px !default;
$animation-position-left     : -300px !default;

// Components
$border-radius               : 5px !default;
$form-elements-radius        : 5px !default;
$form-elements-radius--small : 3px !default;
$form-elements-border-color  : $border-color-secondary !default;
$form-element-border-width   : 2px !default;
$form-element-border-style   : solid !default;
$form-elements-border        : $form-element-border-width $form-element-border-style $form-elements-border-color !default;
$form-elements-border-focus  : none !default;
$form-input-box-shadow-focus : 0 0 0 2px rgba(0, 0, 0, 0.4) !default;
$transition-base             : all 0.3s ease-in-out !default;
$transition-fade             : opacity 0.25s linear !default;