/*
 * App Global variables SCSS
 * ----------------------------------------------------------------------------
 * Place here all global variables.
 */

/*
 * App colors
 */
$black:           #3a3a3a !default; // Headings, standard text.
$gray-darker:     #626262 !default; // Text (emphasis-detail), placeholder, background.
$gray-dark:       #9e9e9e !default; // Borders (never text).
$gray:            #dddddd !default;
$gray-light:      #e9e9e9 !default; // Background.
$gray-lighter:    #f5f5f5 !default;
$white:           #ffffff !default; // Background, reversed text.

$blue:            #0064d2 !default; // Link, background.
$turquoise:       #007982 !default; // Accent.
$green:           #5e8100 !default; // Accent.
$red:             #cb3d4d !default;
$orange:          #f98012 !default; // Accent (never text).
$yellow:          #fbad1a !default; // Accent (never text).
$purple:          #8e24aa !default; // Accent (never text).

$blue-light:      mix($blue, white, 20%) !default; // Background.
$blue-dark:       darken($blue, 10%) !default;

$turquoise-light: mix($turquoise, white, 20%) !default; // Background.
$turquoise-dark:  darken($turquoise, 10%) !default;

$green-light:     mix($green, white, 20%) !default;
$green-dark:      darken($green, 10%) !default;

$red-light:       mix($red, white, 20%) !default;
$red-dark:        darken($red, 10%) !default;

$orange-light:    lighten($orange, 10%) !default;

$yellow-light:    mix($yellow, white, 20%) !default;
$yellow-dark:     mix($yellow, black, 40%) !default;

$core-color:          $orange !default;
$core-color-light:    lighten($core-color, 10%) !default;
$core-color-dark:     darken($core-color, 10%) !default;

$text-color:          $black !default;
$link-color:          $blue !default;
$background-color:    $gray-light !default;
$subdued-text-color:  $gray-darker !default;

$core-online-color: #5cb85c !default;

/*
 * Layout Breakpoints
 *
 * https://ionicframework.com/docs/layout/grid#default-breakpoints
 */

$breakpoint-xs: 0px !default;
$breakpoint-sm: 576px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 992px !default;
$breakpoint-xl: 1200px !default;

$breakpoint-tablet: $breakpoint-lg !default;