// Shared variables

// Initial colors
$black:        hsl(0, 0%, 10%) !default
$black-bis:    hsl(0, 0%, 7%) !default
$black-ter:    hsl(0, 0%, 14%) !default

$grey-darker:  hsl(0, 0%, 21%) !default
$grey-dark:    hsl(0, 0%, 29%) !default
$grey:         hsl(0, 0%, 48%) !default
$grey-light:   hsl(0, 0%, 83.1%) !default
$grey-lighter: hsl(0, 0%, 86%) !default

$white-ter:    hsl(0, 0%, 96%) !default
$white-bis:    hsl(0, 0%, 98%) !default
$white:        hsl(0, 0%, 100%) !default

$orange:       hsl(14,  100%, 53%) !default
$yellow:       hsl(48,  100%, 67%) !default
$green:        hsl(141, 71%,  48%) !default
$turquoise:    hsl(171, 100%, 41%) !default
$cyan:         hsl(204, 86%,  53%) !default
$blue:         hsl(217, 71%,  53%) !default
$purple:       hsl(271, 100%, 71%) !default
$red:          hsl(348, 100%, 61%) !default

// Global Colors
$primary-inset: rgba(0, 0, 0, .3);
$info: hsl(202, 92%, 53%);
$success: hsl(128, 52%, 47%);
$warning: hsl(34, 100%, 65%);
$danger: hsl(358, 100%, 64%);
$black-font: $black-ter;
$body-color: hsl(0, 0%, 10%);
$box-color: $body-color;
$link: #1991eb;
$link-hover: #006fba;
$tabs-link-color: $link;
$tabs-link-hover-color: $link-hover;
$base: #f5f5f5;
$secondary: #6f777b;
$content-heading-color: $body-color;
$subtitle-color: $body-color;
$button-text-color: $link;
$button-text-hover-color: $link-hover;
$button-text-hover-background-color: $white;
$input-color: $body-color;
$input-border-color: $body-color;
$input-hover-border-color: $body-color;
// Font Size/Weight

$size-1: 2.5rem !default
$size-2: 2rem !default
$size-3: 1.5rem !default
$size-4: 1.125rem !default
$size-5: 1rem !default
$size-6: 1rem !default
$size-7: .875rem !default

$weight-light: 300 !default
$weight-normal: 400 !default
$weight-medium: 500 !default
// $weight-semibold: 600 !default
$weight-bold: 700 !default

$title-weight: $weight-normal;

$label-weight: $weight-bold;

// Responsiveness

// The container horizontal gap, which acts as the offset for breakpoints
$gap: 32px !default
$column-gap: 16px !default;
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px !default
// 960px container + 3rem
$desktop: 960px + (2 * $gap) !default
// 1152px container + 3rem
$widescreen: 960px + (2 * $gap)  !default
// 1344px container + 3rem
$fullhd: 960px + (2 * $gap)  !default

// Miscellaneous
$easing: ease-out !default
$radius-small: 2px !default
$radius: 4px !default
$radius-large: 8px !default
$speed: 86ms !default

// Modal

$modal-z: 99;
$modal-content-width: 400px;

// Headings
$content-heading-weight: $weight-normal;
$title-color: $primary;

// Box settings
$box-shadow: 0 0 0 1px rgba($black, .1);
$box-padding: $gap;

// Forms
$control-radius: 0;
$input-shadow: none;
$input-background-color: $white;
$input-border-color: $grey-light;
$input-radius: 0;
$form-danger-shadow: 0 0 0 .125em rgba($danger, .25);
$form-success-shadow: 0 0 0 .125em rgba($success, .25);

// Tabs
$tabs-link-padding: 1em;
$tabs-boxed-link-radius: 8px;

// Paths
$es-font-path: './fonts' !default;
$es-images-path: '../../images' !default;

// For bulma tooltip
$tooltip-background-color: $primary;
$tooltip-max-width: 20rem; // Could set to 300px if need to be exact
