# Token values go here
color:
  white: &color-white "#FFFFFF"
  black: &color-black "#000000"
  blue:
    16: &color-blue-16 "#08214B"
    23: &color-blue-23 "#0A2D6C"
    35: &color-blue-35 "#1E4A93"
    39: &color-blue-39 "#0067C5"
    52: &color-blue-52 "#2D6DDE"
    68: &color-blue-68 "#6C9CEF"
    77: &color-blue-77 "#88C5FF"
    79: &color-blue-79 "#A5BFED"
    97: &color-blue-97 "#EFF4FF"
  neutral:
    7: &color-neutral-7 "#131313"
    15: &color-neutral-15 "#252525"
    27: &color-neutral-27 "#454545"
    34: &color-neutral-34 "#565656"
    53: &color-neutral-53 "#888888"
    61: &color-neutral-61 "#9C9C9C"
    76: &color-neutral-76 "#C2C2C2"
    84: &color-neutral-84 "#D7D7D7"
    85: &color-neutral-85 "#F2F2F2"
    96: &color-neutral-96 "#F6F6F6"
  green:
    33: &color-green-33 "#498128"
    53: &color-green-53 "#90C44B"
    51: &color-green-51 "#B4DF24"
    75: &color-green-75 "#B4E697"
  orange:
    49: &color-orange-49 "#F88402"
    50: &color-orange-50 "#FFAC00"
    82: &color-orange-82 "#FFE1A1"
  red:
    49: &color-red-49 "#DA1E21"
    64: &color-red-64 "#FF4548"
    90: &color-red-90 "#FCCDCE"
brand-color: *color-blue-39
background-color:
  white: *color-white
  light: *color-neutral-96
  dark: *color-neutral-27
  light-blue: *color-blue-79
  lightest-blue: *color-blue-97
  medium-blue: *color-blue-35
  dark-blue: *color-blue-23
  darkest-blue: *color-blue-16
text-color:
  primary:
    on-light: *color-neutral-27
    on-dark: *color-white
    on-medium-blue: *color-white
    on-dark-blue: *color-white
    on-darkest-blue: *color-white
  secondary:
    on-light: *color-neutral-34
  selected:
    on-light: *color-neutral-15
    on-dark: *color-white
    on-medium-blue: *color-white
    on-dark-blue: *color-white
    on-darkest-blue: *color-white
  disabled:
    on-light: *color-neutral-76
    on-dark: *color-neutral-61
    on-medium-blue: *color-neutral-61
    on-dark-blue: *color-neutral-61
    on-darkest-blue: *color-neutral-61
feedback-color:
  information:
    primary: &feedback-color-information-primary *color-neutral-15
    chart: &feedback-color-information-chart "#B1B3BE"
    background: "#FFF7C0"
  error:
    primary: &feedback-color-error-primary *color-red-49
    chart: *color-red-64
    background: *color-red-90
  success:
    primary: &feedback-color-success-primary *color-green-33
    chart: *color-green-53
    background: *color-green-75
  warning:
    primary: &feedback-color-warning-primary *color-orange-49
    chart: *color-orange-50
    background: *color-orange-82
interactive-color:
  default: *color-blue-52
  hover: *color-blue-35
  active: *color-blue-23
  focus: *color-blue-68
link-color:
  default:
    on-light: *color-blue-52
    on-dark: *color-white
    on-medium-blue: *color-white
    on-dark-blue: *color-white
    on-darkest-blue: *color-white
  hover:
    on-light: *color-blue-35
    on-dark: *color-neutral-85
    on-medium-blue: *color-neutral-85
    on-dark-blue: *color-neutral-85
    on-darkest-blue: *color-neutral-85
  active:
    on-light: *color-blue-23
    on-dark: *color-neutral-85
    on-medium-blue: *color-neutral-85
    on-dark-blue: *color-neutral-85
    on-darkest-blue: *color-neutral-85
  visited:
    on-light: *color-blue-35
    on-dark: *color-neutral-85
    on-medium-blue: *color-neutral-85
    on-dark-blue: *color-neutral-85
    on-darkest-blue: *color-neutral-85
icon-color:
  default: *color-blue-52
  hover: *color-blue-35
  active: *color-blue-23
  on-interactive: *color-white
  static: *color-neutral-27
  disabled: *color-neutral-76
  error: *feedback-color-error-primary
  success: *feedback-color-success-primary
  warning: *feedback-color-warning-primary
chart:
  color:
    1: "#61DCE8"
    2: "#01ADBD"
    3: *color-blue-35
    4: "#0072D9"
    5: *color-blue-77
    6: *feedback-color-information-chart
    7: *color-orange-50
    8: "#C66900"
    9: "#D71ECD"
    10: "#9F82F1"
    threshold:
      moderate: "#FFF6E2"
      severe: "#FFE7E8"
  end-point:
    border:
      radius: "50%"
    outline:
      size: "3px"
    hover:
      opacity: ".25"
  hover-bar:
    color: *color-neutral-96
# Border
border:
  radius:
    default: 2px
  separator:
    on-light-color: *color-neutral-76
    on-light: "solid 1px !{*color-neutral-76}"
    on-dark-color: *color-neutral-53
    on-dark: "solid 1px !{*color-neutral-53}"
    on-medium-blue-color: *color-neutral-53
    medium-blue: "solid 1px !{*color-neutral-53}"
    on-dark-blue-color: *color-neutral-53
    dark-blue: "solid 1px !{*color-neutral-53}"
  component:
    on-light-color: *color-neutral-84
    on-light: "solid 1px !{*color-neutral-84}"
    on-dark-color: *color-neutral-61
    on-dark: "solid 1px !{*color-neutral-61}"
    on-medium-blue-color: *color-neutral-61
    medium-blue: "solid 1px !{*color-neutral-61}"
    on-dark-blue-color: *color-neutral-61
    dark-blue: "solid 1px !{*color-neutral-61}"
# Font
font:
  family:
    sans-serif: "'Source Sans Pro', Arial, 'Helvetica Neue', Helvetica, sans-serif"
    monospace: "'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace"
  weight:
    light: "300"
    regular: "400"
    semi-bold: "600"
    bold: "700"
  size:
    xs: 12px
    sm: 14px
    md: 16px
    lg: 24px
    h1:
      sm: 42px
      md: 46px
      lg: 52px
    h2:
      sm: 32px
      md: 36px
      lg: 40px
    h3:
      sm: 28px
      md: 30px
      lg: 32px
    h4:
      sm: 24px
      md: 24px
      lg: 24px
    h5:
      sm: 20px
      md: 20px
      lg: 20px
    h6:
      sm: 18px
      md: 18px
      lg: 18px
    lead:
      sm: 16px
      md: 20px
      lg: 24px
    p:
      sm: 16px
      md: 16px
      lg: 18px
  line-height:
    body: 1.5
    heading: 1.3
    h5: 1.2

# Icons
icon:
  size:
    xs: 16px
    sm: 20px
    md: 24px
    lg: 32px
    xl: 48px

# Box Shadows
box:
  shadow:
    focus: "0 0 0 2px !{*color-blue-68}"
    default: "0 8px 14px 5px rgba(!{*color-black}, .25)"
    hard:
      on-light: "0 4px 0 rgba(!{*color-neutral-84}, .3)"

# Space
space:
  xxs: &space-xxs 4px
  xs: &space-xs 8px
  sm: &space-sm 12px
  md: &space-md 16px
  lg: &space-lg 24px
  xl: &space-xl 32px
  xxl: &space-xxl 48px
  xxxl: &space-xxxl 64px
  inset:
    xxs: *space-xxs
    xs: *space-xs
    sm: *space-sm
    md: *space-md
    lg: *space-lg
    xl: *space-xl
    xxl: *space-xxl
    xxxl: *space-xxxl
    stretch:
      sm: "!{*space-xs} !{*space-sm}"
      md: "!{*space-sm} !{*space-xl}"
      lg: "!{*space-md} !{*space-xl}"
  stack:
    xxs: "0 0 !{*space-xxs}"
    xs: "0 0 !{*space-xs}"
    sm: "0 0 !{*space-sm}"
    md: "0 0 !{*space-md}"
    lg: "0 0 !{*space-lg}"
    xl: "0 0 !{*space-xl}"
    xxl: "0 0 !{*space-xxl}"
    xxxl: "0 0 !{*space-xxxl}"
  inline-left:
    xxs: "0 !{*space-xxs} 0 0"
    xs: "0 !{*space-xs} 0 0"
    sm: "0 !{*space-sm} 0 0"
    md: "0 !{*space-md} 0 0"
    lg: "0 !{*space-lg} 0 0"
    xl: "0 !{*space-xl} 0 0"
    xxl: "0 !{*space-xxl} 0 0"
    xxxl: "0 !{*space-xxxl} 0 0"
  inline-right:
    xxs: "0 0 0 !{*space-xxs}"
    xs: "0 0 0 !{*space-xs}"
    sm: "0 0 0 !{*space-sm}"
    md: "0 0 0 !{*space-md}"
    lg: "0 0 0 !{*space-lg}"
    xl: "0 0 0 !{*space-xl}"
    xxl: "0 0 0 !{*space-xxl}"
    xxxl: "0 0 0 !{*space-xxxl}"

#Z-index
z-index:
  low: 1
  molehill: 10
  mountain: 100
  sticky: 200
  modal-overlay: 800
  modal-content: 810
  top-of-the-world: 900

#Breakpoint
breakpoint:
  sm: 576px
  md: 768px
  lg: 992px
  xl: 1200px

#Grid
grid:
  gap: 40px
  column-width: 70px
  columns: "12"
  container:
    xl: 1280px

#Layout
layout:
  container-max-width: 1200px
  masthead-height:
    mobile: 42px
    default: 56px
  navigation:
    vertical:
      width: 200px
