// Colors
//
//  - Avoid using color *only* to communicate information. In the case of links, use another identifier such as bold or underline to indicate a link verses using color alone.
//  - Some users have difficulty reading text if there is too little contrast between foreground and background. To meet Level AA, text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text). In order to meet the guidelines at the stricter Level AAA, the contrast ratio must be at least 7:1 (or 4.5:1 for large text).
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#color_res">Resources</a></h3><div id="color_res" class="atblock__panel"><ul><li><a href="https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=en" target="_blank">Chrome's Color Contrast Analyzer Extension</a> - best way to identify gradients & background images with a site</li><li><a href="http://www.color-blindness.com/coblis-color-blindness-simulator" target="_blank">Color Blindness Simulator</a> - see how your site looks to a person with one of the various forms of color blindness</li><li><a href="http://colorsafe.co" target="_blank">Color Safe</a> - accessible color palettes based on WCAG Guidelines</li><li><a href="http://contrastchecker.com" target="_blank">Contrast Checker</a> - test color contrast combinations based on WCAG Guidelines</li><li><a href="https://addons.mozilla.org/en-us/firefox/addon/wcag-contrast-checker/" target="_blank">Firefox's WCAG Contrast Checker Add-on</a> - easiest way to quickly test a site & list CSS problems</li><li><a href="https://randoma11y.com" target="_blank">Random A11y Color Palettes</a> - project to try and curate beautiful, random color palettes that are a11y friendly</li><li><a href="http://contrast-finder.tanaguru.com/" target="_blank">Tanaguru Contrast Finder</a> - best way to find close colors that meet WCAG 2.1</li></ul></div></section>
//
//
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#color_guide">WCAG 2.1 Guidelines</a></h3><div id="color_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/#visual-audio-contrast-without-color" target="_blank">1.4.1. Use of Color</a> - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#visual-audio-contrast-contrast" target="_blank">1.4.3 Contrast (Minimum)</a> - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for some cases. (Level AA)</p></div><div class="markup"></div></section>
//
//
//
// Markup:
// <h3>Primary</h3>
// <div class="kss-swatch" style="background-color: #e00000">
//   <div class="kss-swatch__hex">$color-cherry<br>#e00000</div>
// </div>
// <div class="kss-swatch" style="background-color: #a51323">
//   <div class="kss-swatch__hex">$color-ruby<br>#a51323</div>
// </div>
// <div class="kss-swatch" style="background-color: #7fffd4">
//   <div class="kss-swatch__hex">$color-sea-glass<br>#7fffd4</div>
// </div>
// <div class="kss-swatch" style="background-color: #42dc42">
//   <div class="kss-swatch__hex">$color-grass<br>#42dc42</div>
// </div>
// <div class="kss-swatch" style="background-color: #4083ae">
//   <div class="kss-swatch__hex">$color-cornflower<br>#4083ae</div>
// </div>
// <div class="kss-swatch" style="background-color: #0a3055">
//   <div class="kss-swatch__hex">$color-navy<br>#0a3055</div>
// </div>
// <div class="kss-swatch" style="background-color: #ffa0e5">
//   <div class="kss-swatch__hex">$color-ballet-slipper<br>#ffa0e5</div>
// </div>
// <div class="kss-swatch" style="background-color: #550055">
//   <div class="kss-swatch__hex">$color-eggplant<br>#550055</div>
// </div>
// <div class="break"></div>
// <h3>Black, White, Grays</h3>
// <div class="kss-swatch" style="background-color: #000000">
//   <div class="kss-swatch__hex">$color-black<br>#000000</div>
// </div>
// <div class="kss-swatch" style="background-color: #464646">
//   <div class="kss-swatch__hex">$color-midnight<br>#464646</div>
// </div>
// <div class="kss-swatch" style="background-color: #888b8d">
//   <div class="kss-swatch__hex">$color-manatee<br>#888b8d</div>
// </div>
// <div class="kss-swatch" style="background-color: #bbbbbb">
//   <div class="kss-swatch__hex">$color-silver<br>#bbbbbb</div>
// </div>
// <div class="kss-swatch" style="background-color: #dddddd">
//   <div class="kss-swatch__hex">$color-alto<br>#dddddd</div>
// </div>
// <div class="kss-swatch" style="background-color: #f4f4f4">
//   <div class="kss-swatch__hex">$color-gallery<br>#f4f4f4</div>
// </div>
// <div class="kss-swatch" style="background-color: #f7f7f7">
//   <div class="kss-swatch__hex">$color-alabaster<br>#f7f7f7</div>
// </div>
// <div class="kss-swatch" style="background-color: #ffffff">
//   <div class="kss-swatch__hex">$color-white<br>#ffffff</div>
// </div>
// <div class="break"></div>
// <h3>Notification</h3>
// <div class="kss-swatch" style="background-color: #e00000">
//   <div class="kss-swatch__hex">$notification-color-error<br>#e00000</div>
// </div>
// <div class="kss-swatch" style="background-color: #218003">
//   <div class="kss-swatch__hex">$notification-color-success<br>#218003</div>
// </div>
//
// Style guide: General.colors

// Primary
$color-cherry: #e00000;
$color-ruby: #a51323;
$color-blood: #7c0b18;
$color-sea-glass: #7fffd4;
$color-grass: #42dc42;
$color-cornflower: #4083ae;
$color-navy: #0a3055;
$color-ballet-slipper: #ffa0e5;
$color-eggplant: #550055;

// Grays
$color-black: #000000;
$color-charcoal: #222222;
$color-midnight: #464646;
$color-manatee: #888b8d;
$color-silver: #bbbbbb;
$color-alto: #dddddd;
$color-gallery: #f4f4f4;
$color-alabaster: #f7f7f7;
$color-white: #ffffff;

//Notification
$notification-color-error: $color-cherry;
$notification-color-success: #218003;
