// scss-lint:disable ColorKeyword, ColorVariable

// Colors
//
// Use the <code>color()</code> function to add colors to CSS properties.
//
// Markup: chroma-kss-markup.hbs
//
// Weight: -1
//
// Style guide: sass.colors

// The following Sass functions are required to generate some variables' values,
// so we load them first.
@import 'chroma/functions';

// Define descriptive names of color values.
$chroma: define-default-color-scheme('Descriptive color names for use in "functional" color names below.');
$chroma: add-colors((
    white:                  #fff,
    white-smoke:            #f3f3f3,
    grey-extra-light:       #e8e8e8,
    grey-light:             #ccc,
    grey-medium:            #999,
    grey-medium-dark:       #636363,
    grey-dark:              #666,
    grey-extra-dark:        #333,
    black:                  #000,

    blue:                   #0072b9,
    blue-steel:             #466bc8,
    blue-royal:             #3a59a5,
    turquoise:              #52c2c7,
    blue-pale:              #3a59a5,
    purple:                 #5a5f8d,

    pink-pale:              #fef5f1,
    red:                    #c00,
    red-orange:             #ed541d,
    rust:                   #8c2e0b,

    yellow-pale:            #ffd,
    yellow:                 #ff0,
    yellow-dark:            #ed5,

    green-pale:             #f8fff0,
    green-light:            #be7,
    green-dark:             #234600,
));

// Define color names for functional uses.
$chroma: define-color-scheme('functional', 'Colors used by functional parts of the design.');
$chroma: add-colors('functional', (
  // Colors used in the main content area.
    text:                   'grey-extra-dark',
    text-bg:                'white',
    text-rev:               'white',
    text-bg-rev:            'blue-steel',

    link:                   'blue-steel',
    link-active:            'blue-pale',
    link-visited:           'purple',
    link-hover:             'blue-royal',
    link-border-focus:      'turquoise',

    border:                 'white-smoke',
    body-bg:                'text-bg',
    pager-bg:               'grey-extra-light',

    header-background:      'text-bg-rev',
    header-text:            'text-rev',

    nav-bg:                 'grey-extra-dark',
    // Primary navigation.
    primary-navigation-background: 'grey-extra-dark',
    primary-navigation-title-color: 'white',
    primary-navigation-item-color: 'white',
    primary-navigation-item-hover-color: 'grey-extra-dark',
    primary-navigation-item-hover-color-secondary: 'blue-royal',
    primary-navigation-item-hover-background: 'white-smoke',
    primary-navigation-item-active-color: 'grey-extra-dark',
    primary-navigation-item-active-background: 'white',
    // Secondary navigation.
    secondary-menu:         'white',
    secondary-menu-hover:   'grey-light',

    form-error:             'red',
    form-element-border:        'grey-extra-light',
    form-element-border-bottom: 'grey-light',
    form-element-border-hover:  'blue-royal',
    form-element-bg:            'body-bg',
    form-element-bg-hover:      'white-smoke',

    button-color:           'blue',
    button-color-hover:     'white',
    button-bg:              'white-smoke',
    button-bg-hover:        'blue-steel',

    skip-link:              'text-rev',
    skip-link-bg:           'text-bg-rev',

    tabs-bg:                'text-bg',
    tabs-bg-hover:          'white-smoke',
    tabs-border:            'border',
    tabs-secondary-bg:      'white-smoke',
    tabs-secondary-bg-hover: 'grey-extra-light',

    search-color-light:     'white-smoke',
    search-color:           'grey-dark',
    search-border:          'grey-light',
    search-border-light:    'white-smoke',
    search-bg:              'white-smoke',
    search-button:          'blue-steel',
    search-button-light:    'white-smoke',

    breadcrumb-color:       'grey-dark',

    comment-meta:           'grey-dark',
    comment-icon:           'grey-dark',

    date:                   'grey-medium-dark',

    social-bg:              'white-smoke',
    social-bg-hover:        'grey-extra-light',
    social-icon:            'blue-steel',
));

$chroma-active-scheme: 'functional';
