@use './utils';

// 1. Set font size for em & rem calculation plugins
$base-font-size: 14px !default; // 1
$rem-baseline: $base-font-size !default; // 1


$black: #000000;
$bg: #242526;
$bg-accent: #484a4d;
$text-colour: #dadce1;
$nav-size: 60px;
$border: 1px solid #474a4d;
$border-radius: 8px;
$speed:500ms;
$button-size: calc(#{$nav-size} * 0.5);


// Color Variables 2.0
$gray-0: #f9f9f9;
$gray-1: #f2f2f2;
$gray-2: #e9e9e9;
$gray-3: #dfdfdf;
$gray-4: #cccccc;
$gray-5: #9b9b9b;
$gray-6: #767676;
$gray-7: #525252;
$gray-8: #333333;

// Color Variables
$gray-x-dark: #333333;
$gray-dark: #525252;
$gray: #767676;
$gray-med: #9b9b9b;
$gray-light: #ccc;
$gray-x-light: #f2f2f2;
$black: #000;
$white: #fff;
$green-x-light: #edf5d7;
$green-light: #90cd45;
$green-med: #a7ce39;
$green-dark: #749b06;
$yellow-light: #fff6d0;
$yellow-med: #ffd216;
$yellow-dark: #7a6304;
$red-light: #fae6e6;
$red-hover: #eb0000;
$red-med: #cc0000;
$red-dark: #a50000;
$blue-light: #eaf7f9;
$blue-med: #b8e3eb;
$blue-navy: #0a4b8c;
$blue-dark: #0b315e;
$teal: #37baab;
$teal-dark: #1ea192;
$purple: #a0348b;
$purple-dark: #93277e;
$orange: #ea7600;
$orange-dark: #e67300;
$pink: #fb7096;
$pink-dark: #ee6389;
$turquoise-dark: #00334b;

// Font Variables
$font-family: 'Helvetica', 'Arial', sans-serif;
$font-family-2: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 800;
$font-size-default: $base-font-size;
$font-size-1: utils.rem-calc(22px);
$font-size-2: utils.rem-calc(18px);
$font-size-3: utils.rem-calc(16px);
$font-size-4: utils.rem-calc(14px);
$font-size-5: utils.rem-calc(12px);

// Spacing
$space-1: utils.rem-calc(1px);
$space-2: utils.rem-calc(2px);
$space-3: utils.rem-calc(3px);
$space-5: utils.rem-calc(5px);
$space-7: utils.rem-calc(7px);
$space-10: utils.rem-calc(10px);
$space-12: utils.rem-calc(12px);
$space-15: utils.rem-calc(15px);
$space-20: utils.rem-calc(20px);
$space-25: utils.rem-calc(25px);
$space-30: utils.rem-calc(30px);
$space-35: utils.rem-calc(35px);
$space-40: utils.rem-calc(40px);
$space-45: utils.rem-calc(45px);
$space-50: utils.rem-calc(50px);

// UI
$drop-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 5px 1px rgba(0, 0, 0, 0.1);
$alert-shadow: 0 3px 6px 0 rgba(0,0,0,.23), 0 3px 6px 0 rgba(0,0,0,.16);
$border-style: 1px solid $gray-4;

// Space Aliases
$form-group-space: $space-20;