/*
 * 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;

$primary:    $core-color !default;
$secondary:  $blue !default;
$tertiary:   $turquoise !default;
$danger:     $red !default;
$warning:    $yellow !default;
$success:    $green !default;
$info:       $blue !default;
$light:      $gray-lighter !default;
$medium:     $gray-light !default;
$dark:       $black !default;

$colors:  (
    primary: (
        base:             $primary,
        contrast:         #fff,
        shade:            get-color-shade($primary),
        tint:             get-color-tint($primary)
    ),
    secondary: (
        base:             $secondary,
        contrast:         #fff,
        shade:            get-color-shade($secondary),
        tint:             get-color-tint($secondary)
    ),
    tertiary: (
        base:             $tertiary,
        contrast:         #fff,
        shade:            get-color-shade($tertiary),
        tint:             get-color-tint($tertiary)
    ),
    success: (
        base:             $success,
        contrast:         #fff,
        shade:            get-color-shade($success),
        tint:             get-color-tint($success)
    ),
    warning: (
        base:             $warning,
        contrast:         #000,
        shade:            get-color-shade($warning),
        tint:             get-color-tint($warning)
    ),
    danger: (
        base:             $danger,
        contrast:         #fff,
        shade:            get-color-shade($danger),
        tint:             get-color-tint($danger)
    ),
    info: (
        base:             $info,
        contrast:         #fff,
        shade:            get-color-shade($info),
        tint:             get-color-tint($info)
    ),
    light: (
        base:             $light,
        contrast:         #000,
        shade:            get-color-shade($light),
        tint:             get-color-tint($light)
    ),
    medium: (
        base:             $medium,
        contrast:         #fff,
        shade:            get-color-shade($medium),
        tint:             get-color-tint($medium)
    ),
    dark: (
        base:             $dark,
        contrast:         #fff,
        shade:            get-color-shade($dark),
        tint:             get-color-tint($dark)
    )
) !default;

// Just swipe light and dark.
$colors-dark:  (
    primary: map-get($colors, primary),
    secondary: map-get($colors, secondary),
    tertiary: map-get($colors, tertiary),
    success: map-get($colors, success),
    warning: map-get($colors, warning),
    danger: map-get($colors, danger),
    info: map-get($colors, info),
    light: map-get($colors, dark),
    medium: map-get($colors, medium),
    dark: map-get($colors, light),
) !default;

$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !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;