//== Colors
//
// NOTE: when adding a color, also do the following:
//
// 1. add an entry in /docs/colors.md
//    ex: {% colorswatch color-status-complete %}
//
// 2. add a labeled swatch rule for the color in /docs/site-styles/swatch/_styles.scss
//    ex: .labeled-swatch-color-status-complete {
//            @include swatch-with-label($color-status-complete);
//        }

//## Primary colors, gray colors, typography colors

// Primary palette
$color-primary-dark: #1c427b;
$color-primary-dark-shadow: #173665;
$color-primary-medium: #2e6fb1;
$color-primary-medium-light: #0085cf;
$color-primary-light: #86b5e1;

// Secondary palette
$color-secondary-medium: #dfa13c;
$color-secondary-light: #f3d8a2;
$color-primary-sky-blue-medium: #397abd;
$color-primary-sky-blue-light: #bbdbf2;
$color-tomato: #ea5833;
$color-kelley-green: #009b3a;
$color-marigold: #fbbc05;

// Base palette
$color-base-100: #000;
$color-base-90: #333;
$color-base-80: #666;
$color-base-70: #8c8c8c;
$color-base-60: #b3b3b3;

$color-base-50: #ccc;
$color-base-40: #ddd;
$color-base-30: #eee;
$color-base-20: #f5f5f5;
$color-base-0: #fff;

// Attention color palette
$color-attention-error: $color-tomato;

// Typography palette
$color-text-dark: $color-base-90;
$color-text-medium: $color-base-80;
$color-text-light: $color-base-60;
$color-text-white: $color-base-0;
$color-text-default: $color-text-dark;
$color-text-disabled: $color-text-light;
$color-text-link: $color-primary-dark;

$color-text-accent-dark: $color-primary-medium;
$color-text-accent-medium: $color-primary-medium-light;
$color-text-accent-light: $color-primary-light;

/**
    $color-xxx-nn: colors with opacity (i.e. backgrounds will show through).
    $color-xxx-nn-over-white: colors (based on opacity colors) without opacity (not transparent).
*/
$color-primary-dark-05-over-white: #e1e6ee;
$color-primary-dark-08-over-white: #edf0f5;
$color-primary-dark-24-over-white: #d0e1f2;
$color-primary-light-40-over-white: #a5bbd5;
$color-primary-light-56-over-white: #9bb7da;
$color-primary-dark-40-over-white: #7692be;

$color-primary-dark-05: rgba($color-primary-dark, 0.05);
$color-primary-dark-08: rgba($color-primary-dark, 0.08);
$color-primary-dark-24: rgba($color-primary-dark, 0.24);
$color-primary-dark-40: rgba($color-primary-dark, 0.4);
$color-primary-dark-48: rgba($color-primary-dark, 0.48);
$color-primary-medium-48: rgba($color-primary-medium, 0.48);
$color-primary-medium-40: rgba($color-primary-medium, 0.4);
$color-primary-medium-light-56: rgba($color-primary-medium-light, 0.56);
$color-primary-light-40: rgba($color-primary-light, 0.4);
$color-primary-light-54: rgba($color-primary-light, 0.56);
$color-primary-sky-blue-light-60: rgba($color-primary-sky-blue-light, 0.6);
$color-tomato-48: rgba($color-tomato, 0.48);
$color-tomato-08: rgba($color-tomato, 0.08);
$color-kelley-green-48: rgba($color-kelley-green, 0.48);
$color-kelley-green-08: rgba($color-kelley-green, 0.08);
$color-base-50-24: rgba($color-base-50, 0.24);
$color-base-90-40: rgba($color-base-90, 0.4);
$color-marigold-48: rgba($color-marigold, 0.48);
$color-marigold-08: rgba($color-marigold, 0.08);

$color-primary-medium-300: #9bbada;
$color-primary-medium-400: #6897c6;
$color-primary-medium-500: $color-primary-medium;
$color-marigold-300: #fdd79c;
$color-marigold-400: #fbc26a;
$color-marigold-500: $color-marigold;
$color-tomato-300: #f5af9d;
$color-tomato-400: #ef866c;
$color-tomato-500: $color-tomato;
$color-kelley-green-300: #85cfa1;
$color-kelley-green-400: #47b771;
$color-kelley-green-500: $color-kelley-green;

$color-status-notstarted: $color-base-50;
$color-status-notstarted-light: $color-base-40;
$color-status-inprogress: $color-primary-medium-400;
$color-status-inprogress-light: $color-primary-medium-300;
$color-status-onhold: $color-marigold-400;
$color-status-onhold-light: $color-marigold-300;
$color-status-complete: $color-kelley-green-400;
$color-status-complete-light: $color-kelley-green-300;
$color-status-overdue: $color-tomato-400;
$color-status-overdue-light: $color-tomato-300;