#                  888
#                  888
#                  888
#  .d8888b .d88b.  888  .d88b.  888d888 .d8888b
# d88P"   d88""88b 888 d88""88b 888P"   88K
# 888     888  888 888 888  888 888     "Y8888b.
# Y88b.   Y88..88P 888 Y88..88P 888          X88
#  "Y8888P "Y88P"  888  "Y88P"  888      88888P'

# Colors
#
# Styleguide Tokens.Colors
#
# Weight: 1

# Available Colors
#
# Below are the available colors in the USITC Design System, along with acceptable variations in lightness. You can reference these colors in Sass by using the `color()` function shown with each variation, such as `color: color(cyan, 20);` or `background-color: color(red);`. More information on the `color()` function (including how to optionally control opacity), refer to the [color() function](/directives/color).
#
# If you don’t provide a *lightness*, it will default to a lightness of `50`. **Black** and **white** are special cases in that they have no lightness variations. Black will always have `0` lightness and white will always have `100` lightness.
#
# Also shown is the [WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) standard for color contrast for each displayed combination. The text shown on each colored background is either white or black, chosen because that color has *more* contrast on the colored background than the other would.
#
# <div class="panel state-warning">
#
# # Accessibility Note
# Our goal is to meet WCAG 2.0 AA standards for color contrast for all essential content, which is 4.5:1 for normal text and 3:1 for bold or larger text.
#
# <table class="table table-responsive">
#   <thead>
#     <tr>
#       <th>Score</th>
#       <th>Contrast Ratio</th>
#       <th>Result</th>
#     </tr>
#   </thead>
#   <tbody>
#     <tr>
#       <td><span title="7.0+" class="tag-label kss-contrast-aaa">AAA</span></td>
#       <td>7.0+</td>
#       <td>Passes WCAG 2.0 AAA</td>
#     </tr>
#     <tr>
#       <td><span title="4.5+" class="tag-label kss-contrast-aa">AA</span></td>
#       <td>4.5+</td>
#       <td>Passes WCAG 2.0 AA</td>
#     </tr>
#     <tr>
#       <td><span title="3.0+" class="tag-label kss-contrast-aa18">AA18</span></td>
#       <td>3.0+</td>
#       <td>Passes WCAG 2.0 AA Large Text Only (18pt/24px/1.5rem or 14pt/19px/1.2rem bold)</td>
#     </tr>
#     <tr>
#       <td><span title="&lt;3.0" class="tag-label kss-contrast-dnp">DNP</span></td>
#       <td>&lt;3.0</td>
#       <td>Does Not Pass WCAG 2.0</td>
#     </tr>
#   </tbody>
# </table>
#
# _**Tip:** If you’re using a desktop browser, you can hover over any score to see the actual contrast ratio for that color combination._
#
# </div>
#
# Colors:
# @red:     hsl(355, 80, 50)
# @orange:  hsl(25,  80, 50)
# @yellow:  hsl(55,  80, 50)
# @green:   hsl(115, 80, 50)
# @cyan:    hsl(190, 80, 50)
# @blue:    hsl(220, 80, 50)
# @purple:  hsl(280, 80, 50)
# @grey:    hsl(190, 10, 50)
# @black:   hsl(0,   0,  0)
# @white:   hsl(0,   0,  100)
#
# Styleguide Tokens.Colors.Available
#
# Weight: 3
colors--map:
  black:
    hue:                0
    sat:                0
    lum:                0
  white:
    hue:                0
    sat:                0
    lum:                100
  grey:
    hue:                190
    sat:                10
  red:
    hue:                355
    sat:                80
  orange:
    hue:                25
    sat:                80
  yellow:
    hue:                55
    sat:                80
  green:
    hue:                115
    sat:                80
  cyan:
    hue:                190
    sat:                80
  blue:
    hue:                220
    sat:                80
  purple:
    hue:                280
    sat:                80

color:

  # Theme Colors
  #
  # These are the primary colors to be used on USITC websites. Other variations in lightness can be used when appropriate, and other colors from the **Available Colors** shown below can also be used sparingly.
  #
  # Styleguide Tokens.Colors.Theme
  #
  # Weight: 1
  theme:

    # Base Theme
    #
    # These are the colors that should be used by default on USITC websites. You can use these variables in Sass, such as `border-color: $color-theme-base-border;` or `color: $color-theme-base-hover-text;`.
    #
    # <div class="border">
    # <div class="padding">
    #
    # This is an example of our <a href="#">base theme</a> in action.
    #
    # </div>
    # <div class="padding padding-top alt">
    #
    # This is an example of our <a href="#">base theme</a> on the alternate background color.
    #
    # </div>
    # </div>
    #
    # $color-theme-base-background        = color(white)    - #ffffff
    # $color-theme-base-background-alt    = color(grey, 90) - #e2e8e9
    # $color-theme-base-border            = color(grey, 20) - #2b383b
    # $color-theme-base-text              = color(grey, 20) - #2b383b
    # $color-theme-base-accent            = color(cyan, 30) - #0f758a
    # $color-theme-base-link              = color(cyan, 30) - #0f758a
    # $color-theme-base-hover-background  = transparent     - transparent
    # $color-theme-base-hover-text        = color(cyan, 10) - #05272e
    # $color-theme-base-spinner           = color(cyan, 30) - #0f758a
    #
    # Styleguide Tokens.Colors.Theme.Base
    #
    # Weight: 1
    base:
      background:       color(white) !default
      background-alt:   color(grey, 90) !default
      border:           color(grey, 20) !default
      text:             color(grey, 20) !default
      accent:           color(cyan, 30) !default
      link:             color(cyan, 30) !default
      hover-background: transparent !default
      hover-text:       color(cyan, 10) !default
      spinner:          color(cyan, 30) !default

    # Dark Theme
    #
    # When you want to use a dark background, use these colors.
    #
    # <div class="border on-dark">
    # <div class="padding">
    #
    # This is an example of our <a href="#">dark theme</a> in action.
    #
    # </div>
    # <div class="padding padding-top on-dark on-dark-alt">
    #
    # This is an example of our <a href="#">dark theme</a> on the alternate background color.
    #
    # </div>
    # </div>
    #
    # $color-theme-dark-background        = color(cyan, 20) - #0a4e5c
    # $color-theme-dark-background-alt    = color(cyan, 30) - #0f758a
    # $color-theme-dark-border            = color(cyan, 20) - #0a4e5c
    # $color-theme-dark-text              = color(white)    - #ffffff
    # $color-theme-dark-accent            = color(cyan, 80) - #a3c5f5
    # $color-theme-dark-link              = color(white)    - #ffffff
    # $color-theme-dark-hover-background  = transparent     - transparent
    # $color-theme-dark-hover-text        = color(cyan, 80) - #a3c5f5
    # $color-theme-dark-spinner           = color(white)    - #ffffff
    #
    # Styleguide Tokens.Colors.Theme.Dark
    #
    # Weight: 2
    dark:
      background:       color(cyan, 20) !default
      background-alt:   color(cyan, 30) !default
      border:           color(cyan, 20) !default
      text:             color(white) !default
      accent:           color(cyan, 80) !default
      link:             color(white) !default
      hover-background: transparent !default
      hover-text:       color(cyan, 80) !default
      spinner:          color(white) !default

  # State Colors
  #
  # Use these state color themes to convey information to users.
  #
  # Styleguide Tokens.Colors.State
  #
  # Weight: 2
  state:

    # Error State
    #
    # These colors should be used to show an error or a very important message for the user.
    #
    # <div class="panel border state-error">
    #
    # This is an example of our <a href="#">error state</a> in action.
    #
    # </div>
    #
    # $color-state-error-background       = color(red, 95)  - #fce8ea
    # $color-state-error-background-alt   = color(red, 90)  - #fad1d4
    # $color-state-error-border           = color(red, 40)  - #b81422
    # $color-state-error-text             = color(grey, 20) - #2b383b
    # $color-state-error-accent           = color(red, 30)  - #8a0f19
    # $color-state-error-link             = color(red, 40)  - #b81422
    # $color-state-error-hover-background = transparent     - transparent
    # $color-state-error-hover-text       = color(red, 60)  - #eb4755
    # $color-state-error-spinner          = color(red, 40)  - #b81422
    #
    # Styleguide Tokens.Colors.State.Error
    #
    # Weight: 1
    error:
      background:       color(red, 95) !default
      background-alt:   color(red, 90) !default
      border:           color(red, 40) !default
      text:             color(grey, 20) !default
      accent:           color(red, 30) !default
      link:             color(red, 40) !default
      hover-background: transparent !default
      hover-text:       color(red, 60) !default
      spinner:          color(red, 40) !default

    # Info State
    #
    # These colors should be used to show a standard message for the user.
    #
    # <div class="panel border state-info">
    #
    # This is an example of our <a href="#">info state</a> in action.
    #
    # </div>
    #
    # $color-state-info-background        = color(cyan, 95) - #e8f9fc
    # $color-state-info-background-alt    = color(cyan, 90) - #d1f3fa
    # $color-state-info-border            = color(cyan, 30) - #0f758a
    # $color-state-info-text              = color(grey, 20) - #2e3238
    # $color-state-info-accent            = color(cyan, 30) - #0f758a
    # $color-state-info-link              = color(cyan, 30) - #0f758a
    # $color-state-info-hover-background  = transparent     - transparent
    # $color-state-info-hover-text        = color(cyan, 10) - #05272e
    # $color-state-info-spinner           = color(cyan, 30) - #0f758a
    #
    # Styleguide Tokens.Colors.State.Info
    #
    # Weight: 2
    info:
      background:       color(cyan, 95) !default
      background-alt:   color(cyan, 90) !default
      border:           color(cyan, 30) !default
      text:             color(grey, 20) !default
      accent:           color(cyan, 30) !default
      link:             color(cyan, 30) !default
      hover-background: transparent !default
      hover-text:       color(cyan, 10) !default
      spinner:          color(cyan, 30) !default

    # Success State
    #
    # These colors should be used to show that an action has successfully completed or a positive message for the user.
    #
    # <div class="panel border state-success">
    #
    # This is an example of our <a href="#">success state</a> in action.
    #
    # </div>
    #
    # $color-state-success-background       = color(green, 95)  - #eafce8
    # $color-state-success-background-alt   = color(green, 90)  - #d5fad1
    # $color-state-success-border           = color(green, 20)  - #115c0a
    # $color-state-success-text             = color(grey, 20)   - #2e3638
    # $color-state-success-accent           = color(green, 20)  - #115c0a
    # $color-state-success-link             = color(green, 30)  - #1a8a0f
    # $color-state-success-hover-background = transparent       - transparent
    # $color-state-success-hover-text       = color(green)      - #3ce619
    # $color-state-success-spinner          = color(green, 30)  - #1a8a0f
    #
    # Styleguide Tokens.Colors.State.Success
    #
    # Weight: 3
    success:
      background:       color(green, 95) !default
      background-alt:   color(green, 90) !default
      border:           color(green, 20) !default
      text:             color(grey, 20) !default
      accent:           color(green, 20) !default
      link:             color(green, 30) !default
      hover-background: transparent !default
      hover-text:       color(green) !default
      spinner:          color(green, 30) !default

    # Warning State
    #
    # These colors should be used to show a warning or a semi-important message for the user.
    #
    # <div class="panel border state-warning">
    #
    # This is an example of our <a href="#">warning state</a> in action.
    #
    # </div>
    #
    # $color-state-warning-background       = color(orange, 95) - #fcf1e8
    # $color-state-warning-background-alt   = color(orange, 90) - #fae2d1
    # $color-state-warning-border           = color(orange, 40) - #b85814
    # $color-state-warning-text             = color(grey, 20)   - #2e3638
    # $color-state-warning-accent           = color(orange, 30) - #8a420f
    # $color-state-warning-link             = color(orange, 30) - #8a420f
    # $color-state-warning-hover-background = transparent       - transparent
    # $color-state-warning-hover-text       = color(orange)     - #e6a219
    # $color-state-warning-spinner          = color(orange)     - #e6a219
    #
    # Styleguide Tokens.Colors.State.Warning
    #
    # Weight: 4
    warning:
      background:       color(orange, 95) !default
      background-alt:   color(orange, 90) !default
      border:           color(orange, 40) !default
      text:             color(grey, 20) !default
      accent:           color(orange, 30) !default
      link:             color(orange, 30) !default
      hover-background: transparent !default
      hover-text:       color(orange) !default
      spinner:          color(orange) !default