Variables

// Priority colours
$white                           : #fff !default;
$black                           : #000 !default;
$red                             : #e30613 !default;

// Semantic variable colours
$orange                          : #fab216 !default;
$yellow                          : #ffd500 !default;
$green                           : #0bcfc3 !default;
$green-dark                      : #1dcf45 !default;
$green-darker                    : #01b905 !default;
$blue-light                      : #f2f5f7 !default;
$blue                            : #2962ff !default;
$teal                            : #5bc0de !default;
$pink                            : #ff5b77 !default;
$purple                          : #613d7c !default;
$darkred                         : #c90613 !default;
$lightred                        : #f87d7d !default;

// Grayscale colors
$gray-background                 : #4b4b4b !default;
$gray-font                       : #757575 !default;
$gray-color                      : #656565 !default;
$gray-button                     : #343434 !default;
$gray-darkest                    : #1b1b1b !default;
$gray-darker                     : #252525 !default;
$gray-dark                       : #505050 !default;
$gray                            : #8f8f8f !default;
$gray-light                      : #c4c4c4 !default;
$gray-lighter                    : #e5e5e5 !default;
$gray-lightest                   : #f7f7f9 !default;
$gray-link                       : #363636 !default;
$gray-medium                     : #929292 !default;

// Priority colours website
$color-primary                   : $red !default;
$color-secondary                 : $gray-darkest !default;
$color-tertiary                  : $white !default;
$color-button                    : $green !default;
$color-button-darker             : $green-darker !default;
$color-button-hover              : $green-dark !default;

// Hover colour
//$background-hover                : linear-gradient(180deg, rgba(0,0,0, 0.25) 0%, rgba($color-primary, 100)) !default;

// Semantic color scheme
$color-success                   : $green-darker !default;
$color-success-hover             : $green-dark !default;
$color-info                      : $teal !default;
$color-warning                   : $orange !default;
$color-danger                    : $darkred !default;
$color-inverse                   : $gray-darker !default;
$color-focus                     : $gray-lighter !default;

// Background
$bg-color-base                   : $gray-lighter !default;
$bg-color-dark                   : $black !default;
$bg-color-green                  : $green !default;

// Border
$border-color-base               : $gray-darker !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-focus                    : none $color-focus !default;
$border-focus-dark               : none !default;

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

// Focus inline
$color-focus-inline              : $white !default;
$color-focus-inline-dark         : $gray-darkest !default;
$bg-focus-inline                 : $color-focus !default;
$bg-focus-inline-dark            : $color-primary !default;
$outline-focus-inline            : $outline-base !default;
$text-decoration-focus-inline    : underline !default;

// Typography
$font-family-sans-serif          : 'Montserrat', sans-serif !default;
$font-family-saira               : 'Saira', sans-serif !default;
$font-family-saira-bold          : 'Saira Bold', sans-serif !default;
$font-family-roboto              : 'Roboto', sans-serif !default;
$font-family-roboto-condensed    : 'Roboto Condensed', sans-serif !default;
$font-family-evogria             : 'Evogria Regular', sans-serif !default;
$font-family-monospace           : Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;

$font-family-base                : $font-family-roboto !default;
$font-family-heading             : $font-family-evogria !default;
$font-family-base-condensed      : $font-family-roboto-condensed !default;
$font-family-alternative         : $font-family-saira !default;

$font-color-base                 : $gray-darkest !default;
$font-weight-normal              : normal !default;
$font-weight-bold                : bold !default;
$font-weight-bolder              : bolder !default;
$font-weight-semibold            : 600 !default;
$font-weight-base                : $font-weight-normal !default;
$font-line-height                : 1.2 !default;
$font-line-height-alternative    : 1.6 !default;
$font-style-italic               : italic !default;

$font-size-xxxxl                 : 50px !default;
$font-size-xxxl                  : 35px !default;
$font-size-xxl                   : 30px !default;
$font-size-extra-large           : 22px !default;
$font-size-large                 : 18px !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               : 1350px !default;

// Layout - breakpoints
$screen-xs                       : 320px !default;
$screen-s                        : 480px !default;
$screen-m                        : 768px !default;
$screen-l                        : 992px !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;

// Components
$border-radius                   : 6px !default;
$border-radius-below             : 0 0 $border-radius $border-radius !default;
$border-radius-above             : $border-radius $border-radius 0 0 !default;
$border-radius-left              : $border-radius 0 0 $border-radius !default;
$border-radius-right             : 0 $border-radius 0 $border-radius 0 !default;

$border-radius--small            : 3px !default;
$border-radius--large            : 8px !default;
$form-elements-radius            : 4px !default;
$form-elements-radius--small     : 3px !default;
$form-elements-border-color      : $gray-light !default;
$form-elements-border-color-focus: $gray-darker !default;
$form-input-box-shadow-focus     : 0 4px 6px 0 rgba(57, 50, 67, 0.3) !default;
$form-select-background          : #ecf5f4 !default;
$form-select-background--gray    : #f6f6f6 !default;
$form-select-radius              : 3px !default;
$form-checkbox-background-color  : #f3f3f3 !default;
$form-checkbox-border            : 1px solid #b2b2b2 !default;

$transition-base                 : all 0.3s ease-in-out, outline-offset 1ms !default;
$transition-fade                 : opacity 0.25s linear !default;

$box-shadow                      : 0 0 35px rgba(0, 0, 0, 0.2) !default;
$box-shadow-slider               : 0 0 5px rgba(0, 0, 0, 0.2) !default;

$bg-shadow                       : linear-gradient(90deg, #1f1b1a 1.5%, rgba(31, 27, 26, 0) 110%);

// Spacers
$spacer--01                      : 0.15rem !default;
$spacer--0225                    : 0.225rem !default;
$spacer--036                     : 0.36rem !default;
$spacer--05                      : 0.5rem !default;
$spacer--075                     : 0.75rem !default;
$spacer--1                       : 1rem !default;
$spacer--125                     : 1.225rem !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--5                       : 5rem !default;
$spacer--6225                    : 6.225rem !default;

$spacer--extra-small             : $spacer--01 !default;
$spacer--small                   : $spacer--0225 !default;
$spacer                          : $spacer--05 !default;
$spacer--medium                  : $spacer--1 !default;
$spacer--default                 : $spacer--125 !default;
$spacer--m                       : $spacer--15 !default;
$spacer--semi-medium             : $spacer--15 !default;
$spacer--large                   : $spacer--2 !default;
$spacer--l                       : $spacer--2 !default;
$spacer--semi-large              : $spacer--25 !default;
$spacer--extra-large             : $spacer--3 !default;
$spacer--xl                      : $spacer--3 !default;
$spacer--extra-extra-large       : $spacer--4 !default;
$spacer--xxl                     : $spacer--4 !default;
$spacer--larger                  : $spacer--5 !default;
$spacer--largest                 : $spacer--6225 !default;

// Components
$form-elements-border-color      : $border-color-secondary !default;
$form-element-border-width       : 1px !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;