// xblock: utilities - Sass variables
// ====================

// NOTES:
// * these are general variables to be set and overriden later by theming and particular xblock _variables.scss files

// --------------------
// units
// --------------------
$baseline-v: 20px;                                                  // vertical baseline
$baseline-h: 40px;                                                  // horizontal baseline

// --------------------
// layout - grid (neat-based - http://neat.bourbon.io/)
// --------------------
// grid
$max-width: 100%;                                                   // http://gridcalculator.dk/#/1040/12/20/20
$grid-columns: 12;                                                  // make grid 12 columns
$column: $baseline-v;
$gutter: $baseline-v;                                               // gutter b/t columns
// $visual-grid: true;
// $visual-grid-index: front;

// --------------------
// colors - basic
// --------------------
// grays
$gray: rgb(55, 59, 68);
$gray-l1: tint($gray,20%);
$gray-l2: tint($gray,40%);
$gray-l3: tint($gray,60%);
$gray-l4: tint($gray,80%);
$gray-l5: tint($gray,90%);
$gray-l6: tint($gray,95%);
$gray-l7: tint($gray,99.50%);
$gray-d1: shade($gray,20%);
$gray-d2: shade($gray,40%);
$gray-d3: shade($gray,60%);
$gray-d4: shade($gray,80%);
$gray-d5: shade($gray,90%);
$gray-d6: shade($gray,95%);

// blacks
$black: $gray-d6;
$black-t: rgb(0,0,0);
$black-t3: rgba($black,0.75);

// whites
$white: rgb(255, 255, 255);

// shadows
$shadow: rgba($black,0.2);
$shadow-l1: rgba($black,0.1);
$shadow-l2: rgba($black,0.05);
$shadow-d1: rgba($black,0.4);

// blue
$blue: rgb(128, 169, 204);
$blue-s1: saturate($blue,15%);
$blue-u1: desaturate($blue,15%);
$blue-u2: desaturate($blue,30%);

// --------------------
// fonts
// --------------------
$f-serif: 'Poly', Cambria, Georgia, 'Times New Roman', Times, serif;
$f-sans-serif: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;


// --------------------
// animation/transitions
// --------------------
// timing - used for animation/transition mixin syncing
$tmg-s3: 3.0s;
$tmg-s2: 2.0s;
$tmg-s1: 1.0s;
$tmg-avg: 0.75s;
$tmg-f1: 0.50s;
$tmg-f2: 0.25s;
$tmg-f3: 0.125s;

// animation-based settings
$anim-distance-offviewport: ($baseline-h*100);                      // for larger/page-level animations

//---------------------
// UXPL colors
//---------------------
$uxpl-gray-base: rgb(65, 65, 65);
$uxpl-gray-dark: rgb(17, 17, 17);
$uxpl-gray-back: rgb(217, 217, 217);
$uxpl-gray-x-back: rgb(245, 245, 245);
$uxpl-primary-base: rgb(0, 117, 180);
$uxpl-primary-dark: rgb(6, 86, 131);
$uxpl-success-text: rgb(0, 129, 0);
$uxpl-success-back: rgb(236, 250, 236);
$uxpl-warning-accent: rgb(255, 192, 31) ;
$uxpl-warning-back: rgb(255, 249, 235);
$uxpl-error-text: rgb(178, 6, 16);
$uxpl-error-back: rgb(254, 236, 237);

// --------------------
// application - fonts
// --------------------
$f-title: $f-sans-serif;
$f-copy: $f-serif;
$f-action: $f-sans-serif;
$f-base-color: $uxpl-gray-base;

// type sizes
$f-size-xsmall: 10;
$f-size-small: 12;
$f-size-base: 14;
$f-size-medium: 16;
$f-size-large: 18;
$f-size-xlarge: 22;

// --------------------
// application - colors
// --------------------

// application - colors: decorative
$color-decorative-primary: $blue-u2;
$color-decorative-secondary: tint($color-decorative-primary, 30%);
$color-decorative-tertiary:  $uxpl-gray-back;
$color-decorative-quaternary: tint($color-decorative-primary, 90%);
$color-decorative-quinternary: tint($color-decorative-primary, 98%);

// application - colors: states
$color-disabled: $gray-l4;
$color-unfocused: $gray-l2;
$color-focused: $blue-u2;

// application - colors: actions
$action-primary-color: $uxpl-primary-base;
$action-primary-color-focus: $uxpl-primary-dark;
$action-primary-color-active: $uxpl-primary-base;
$action-primary-color-disabled: rgb(180,179,179);
$action-primary-color-disabled-back: $uxpl-gray-x-back;

// application - colors: copy and headings
$heading-color: $f-base-color;
$copy-color: $f-base-color;
$copy-inverse-color: $white;

// application - colors: states
$selected-color: $black-t;

// application - colors: view-based elements
$bg-view: $gray-l7;
$bg-content: $white;
$bg-message: $black;

// --------------------
// // application - colors: states
// --------------------
$color-error: $uxpl-error-text;
$color-error-back: $uxpl-error-back;

$color-warning: $uxpl-warning-accent;
$color-warning-back: $uxpl-warning-back;

$color-complete: $uxpl-success-text;
$color-complete-back: $uxpl-success-back;

$color-incomplete: $color-warning;
$color-incomplete-back: $color-warning-back;

$color-confirm: $heading-color;
$color-unavailable: $uxpl-gray-back;

// --------------------
// // application - colors: staff UI
// --------------------
$color-decorative-staff: $color-decorative-primary;
$heading-staff-color: $white;
$staff-bg: $gray-d1;
