// @import 'include-media/dist/_include-media';

// Breakpoints
$breakpoints: (small: 320px, medium: 800px, large: 1024px);
$medium-screen: 800px;

// Sizing
$unit: 8px;

// Colors
$grey-00: #444;
$grey-40: #777;
$grey-50: #888;
$grey-60: #A9A9A9;
$grey-70: #C6C6C6;
$grey-80: #E9E9E9;
$grey-90: #F5F5F5;
$grey-100:#FAFAFA;
$background-color: $grey-90;

$blue: #61B3FF;
$red: #FF6161;
$error: #D13A3A;

// Colors: Elements
$wind-text-dark:    #009961;
$wind-text-light:   #1DC688;
$wind-bg-dark:      #4CFFBF;
$wind-bg-light:     #CDFFED;

$fire-text-dark:    #990000;
$fire-text-light:   #EC5C5C;
$fire-bg-dark:      #FF4D4D;
$fire-bg-light:     #FFCDCD;

$water-text-dark:   #006199;
$water-text-light:  #5CB7EC;
$water-bg-dark:     #4DBFFF;
$water-bg-light:    #CDEDFF;

$earth-text-dark:   #994000;
$earth-text-light:  #EC985C;
$earth-bg-dark:     #FF974C;
$earth-bg-light:    #FFE2CD;

$light-text-dark:   #998A00;
$light-text-light:  #C5B20C;
$light-bg-dark:     #FFED4C;
$light-bg-light:    #FFFACD;

$dark-text-dark:    #8806B7;
$dark-text-light:   #C65CEC;
$dark-bg-dark:      #D14CFF;
$dark-bg-light:     #F2CDFF;

// Font weight
$normal: 400;
$medium: 500;
$bold: 600;

// Font size
$font-tiny:     11px;
$font-small:    13px;
$font-button:   15px;
$font-regular:  16px;
$font-large:    21px;
$font-xlarge:   24px;
$font-xxlarge:  28px;

// Scale factors
$scale-wide: scale(1.05, 1.05);
$scale-tall: scale(1.012, 1.012);

// Shadows
$hover-stroke: 1px solid rgba(0, 0, 0, 0.1);
$hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;