//== Colors
/*doc
---
title: Primary
name: primary
category: Colors
---

Used for elements (i.e buttons, labels and ***)
<div class="clearfix">
  <div class="color-box brand-primary">
    <span>$brand-primary</span>
  </div>
  <div class="color-box brand-success">
    <span>$brand-success</span>
  </div>
  <div class="color-box brand-warning">
    <span>$brand-warning</span>
  </div>
  <div class="color-box brand-danger">
    <span>$brand-danger</span>
  </div>
  <div class="color-box color-1">
    <span>$color-poptype-green</span>
  </div>
  <div class="color-box  color-2">
    <span>$color-poptype-yellow</span>
  </div>
  <div class="color-box  color-3">
    <span>$color-poptype-red</span>
  </div>
  <div class="color-box color-4">
    <span>$color-poptype-blue</span>
  </div>
  <div class="color-box color-5">
    <span>$color-poptype-magenta</span>
  </div>
  <div class="color-box color-6">
    <span>$color-poptype-orange</span>
  </div>
</div>
 */

/*doc
---
title: Text
name: text
category: Colors
---

Used for text, borders and list elements.
<div class="clearfix">
  <div class="color-box text-color">
    <span>$text-color</span>
  </div>
  <div class="color-box text-color-dark">
    <span>$text-color-dark</span>
  </div>
  <div class="color-box text-color-light">
    <span>$text-color-light</span>
  </div>
</div>
 */

/*doc
---
title: UI Colors
name: ui-colors
category: Colors
---

Used for borders, background and dividers
<div class="clearfix">
  <div class="color-box ui-color-default">
    <span>$ui-color-default</span>
  </div>
  <div class="color-box ui-color-light">
    <span>$ui-color-light</span>
  </div>
  <div class="color-box ui-color-lighter">
    <span>$ui-color-lighter</span>
  </div>
  <div class="color-box ui-color-lightest">
    <span>$ui-color-lightest</span>
  </div>
</div>
 */


// Palette
$color-poptype-green: #02ad55;
$color-poptype-yellow: #fed83e;
$color-poptype-red: #ff443d;
$color-poptype-blue: #0077cd;
$color-poptype-magenta: #ff3e79;
$color-poptype-orange: #f46620;

$white: #fff;
$black: #333;

$gray: #666;
$gray-bluer: #647D8E;
$gray-light: #999;
$gray-lighten: #98adbb;
$gray-lighter: #cbd7e4;
$gray-lightest: #e0e3e9;
$gray-lightestest: #F5F9FA;
$gray-blue: $gray-lightest; //TODO Remove

$green-icy: #f2fbf6;

// Renaming
$brand-primary: $color-poptype-green;
$brand-success: $color-poptype-green;
$brand-info: $color-poptype-blue; // Should usages point to brand primary?
$brand-warning: $color-poptype-yellow;
$brand-danger: $color-poptype-red;

$text-color-dark: $black;
$text-color: $gray;
$text-color-light: $gray-light;
$link-color: $brand-info;

$ui-color-default: $gray-lighten;
$ui-color-light: $gray-blue;
$ui-color-lighter: $gray-lighter;
$ui-color-lightest: $gray-lightest;

$border-default: $gray-lighten;
$border-alt: $gray-blue;


//** Global color for active items (e.g., navs or dropdowns).
$component-active-color: $gray;

// Navigation
$nav-link-hover-bg: none;
$nav-tabs-active-color: #ff3e79;
$nav-tabs-active-link-hover-bg: none;
$nav-tabs-border-color: #e0e3e9;
$nav-tabs-link-color: $gray-light;
$nav-tabs-link-hover-bg: none;

// Labels
$label-default-bg: $gray-light;
$label-primary-bg: $brand-primary;
$label-success-bg: $brand-success;
$label-info-bg: $brand-info;
$label-warning-bg: $brand-warning;
$label-danger-bg: $brand-danger;

$label-color: $white;
$label-link-hover-color: $white;

$facebook-color: #3b5998;
$twitter-color: #55acee;
$instagram-color: #c13584;