// sass-lint:disable indentation, no-color-keywords, no-color-hex

// Colors
//
// Use the `color()` function to add colors to CSS properties. To learn more,
// [read the Chroma documentation](http://johnalbin.github.io/chroma/).
//
// Markup: chroma.twig
//
// Weight: -1
//
// Style guide: sass.colors

// Define the default color scheme's color names.
$chroma: define-default-color-scheme('branding', 'The site\'s main colors. Can be used to define colors in other color schemes.');

$chroma: add-colors((
  black:                  #000,
  grey-dark:              ('black' lighten 40%), // #666
  'grey':                 ('black' lighten 60%), // #999
  grey-light:             ('black' lighten 80%), // #ccc
  grey-extra-light:       ('black' lighten 93.33%), // #eee
  white:                  #fff,

  blue:                   #0072b9,
  red:                    #c00,
  yellow:                 #fd0,
));

// 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:                   'black',

  link:                   'blue',
  link-visited:           ('blue' darken 20%),
  link-active:            'red',

  border:                 'grey-light',

  button:                 'text',
  button-disabled:        'grey',

  mark-bg:                'yellow',
));

$chroma-active-scheme: 'functional';
