$color-white:         #ffffff;

// --------------------------------------------------
// Red
// --------------------------------------------------

$color-red-300:       #ec4149;
$color-red-500:       #da161f;
$color-red-600:       #be131b;
$color-red-700:       #a21017;
$color-red-800:       #870e13;
$color-red-900:       #6b0b0f;
$color-red-999:       #430a0d;

// --------------------------------------------------
// Stone
// --------------------------------------------------

$color-stone-100:     #f9f9f8;
$color-stone-150:     #f4f3f1;
$color-stone-200:     #eeedea;
$color-stone-300:     #dcd9d7;
$color-stone-400:     #cdcac7;
$color-stone-500:     #c4c1bd;
$color-stone-600:     #b6b2ad;
$color-stone-700:     #a8a29d;
$color-stone-800:     #95908b;
$color-stone-900:     #8b847d;
$color-stone-999:     #6a645e;

// --------------------------------------------------
// Grey
// --------------------------------------------------

$color-grey-50:       #f2f2f2;
$color-grey-100:      #e5e5e5;
$color-grey-200:      #cccccc;
$color-grey-300:      #b2b2b2;
$color-grey-500:      #7f7f7f;
$color-grey-600:      #666666;
$color-grey-660:      #595959;
$color-grey-700:      #4c4c4c;
$color-grey-800:      #333333;
$color-grey-900:      #191919;

// --------------------------------------------------
// Blue
// --------------------------------------------------

$color-blue-50:       #E1ECF0;
$color-blue-100:      #B5CFD9;
$color-blue-200:      #84b0c0;
$color-blue-300:      #5390a6;
$color-blue-400:      #2e7893;
$color-blue-500:      #096080;
$color-blue-600:      #085878;
$color-blue-700:      #064e6d;
$color-blue-800:      #054463;
$color-blue-900:      #023350;

// --------------------------------------------------
// Light Blue
// --------------------------------------------------

$color-light-blue-50:  #fbfcfd;
$color-light-blue-100: #f4f8fa;
$color-light-blue-200: #edf4f7;
$color-light-blue-300: #e6f0f3;
$color-light-blue-400: #e0ecf1;
$color-light-blue-500: #dbe9ee;
$color-light-blue-600: #d7e6ec;
$color-light-blue-700: #d2e3e9;

// --------------------------------------------------
// Utility Green
// --------------------------------------------------

$color-utility-green-50:    #e5f0e5;
$color-utility-green-100:   #bedbbe;
$color-utility-green-200:   #93c393;
$color-utility-green-500:   #268626;
$color-utility-green-600:   #227e22;
$color-utility-green-700:   #1c731c;
$color-utility-green-800:   #0c520c;
$color-utility-green-900:   #094409;

// --------------------------------------------------
// Utility Red
// --------------------------------------------------

$color-utility-red-50:    #fae1e1;
$color-utility-red-100:   #f2b3b3;
$color-utility-red-200:   #ea8181;
$color-utility-red-500:   #d50202;
$color-utility-red-600:   #d00202;
$color-utility-red-700:   #ca0101;
$color-utility-red-800:   #ac0000;
$color-utility-red-900:   #880000;

// --------------------------------------------------
// Utility Yellow
// --------------------------------------------------

$color-utility-yellow-50:    #fefdee;
$color-utility-yellow-100:   #fdf9db;
$color-utility-yellow-200:   #fcf6c4;
$color-utility-yellow-500:   #f8ec88;
$color-utility-yellow-700:   #f6e775;
$color-utility-yellow-900:   #f3df58;

// --------------------------------------------------
// Primary
// --------------------------------------------------

$color-orange:        #FF6B00;
$color-mustard:       #FFD756;

// --------------------------------------------------
// Utility
// --------------------------------------------------

$color-green:      $color-utility-green-500;
$color-blue:       $color-blue-500;
$color-blue-steel: #e5eff1;
$color-yellow:     $color-utility-yellow-500;
$color-red-bright: $color-utility-red-500;

$color-can-conservatives: #002596;
$color-can-liberals:      #D71920;
$color-can-ndp:           #F58220;
$color-can-bloc:          #3DA9DF;
$color-can-green:         #3D9B35;
$color-us-republican:     #d8171e;
$color-us-democrat:       #00AEF3;

$color-graphics-burgundy: #852e57;
$color-graphics-salmon:   #d56161;
$color-graphics-gold:     #c7a274;
$color-graphics-bronze:   #9e7441;
$color-graphics-sky:      #89cad3;
$color-graphics-gray:     #cccccc;

// --------------------------------------------------
// Single Package Colours (Homepage)
// --------------------------------------------------

$color-gold-900:   #9e7441;
$color-rust-900:   #a45037;
$color-olive-900:  #5b6a57;
$color-teal-900:   #2e707c;

// --------------------------------------------------
// Global focus outline
// --------------------------------------------------

$color-focus: #0295D9;
$color-focus-inverted: $color-white;

// --------------------------------------------------
// Controls (i.e. buttons and form fields)
// --------------------------------------------------

// This utility function allows you to grab styling from the $control-colors SASS list

@function get-control-colors($theme, $property, $state) {
  @return map-get(map-get(map-get($control-colors, #{$theme}), #{$property}), #{$state});
}

$control-colors: (
  light-primary: (
    borders: (
      default: $color-stone-500,
      hover: $color-stone-500,
      active: $color-stone-500
    ),
    bgs: (
      default: $color-white,
      hover: $color-stone-150,
      active: $color-stone-200
    ),
    text: (
      default: $color-grey-660,
      hover: $color-grey-800,
      active: $color-grey-900
    )
  ),
  light-secondary: (
    borders: (
      default: $color-stone-500,
      hover: $color-stone-500,
      active: $color-stone-500
    ),
    bgs: (
      default: $color-stone-100,
      hover: $color-stone-150,
      active: $color-stone-200
    ),
    text: (
      default: $color-grey-660,
      hover: $color-grey-800,
      active: $color-grey-900
    )
  ),
  dark-primary: (
    borders: (
      default: $color-grey-300,
      hover: $color-grey-300,
      active: $color-grey-300
    ),
    bgs: (
      default: $color-grey-700,
      hover: $color-grey-600,
      active: $color-grey-900
    ),
    text: (
      default: $color-white,
      hover: $color-white,
      active: $color-white
    )
  ),
  dark-secondary: (
    borders: (
      default: $color-grey-300,
      hover: $color-grey-300,
      active: $color-grey-300
    ),
    bgs: (
      default: $color-grey-800,
      hover: $color-grey-600,
      active: $color-grey-900
    ),
    text: (
      default: $color-white,
      hover: $color-white,
      active: $color-white
    )
  ),
  blue-primary: (
    borders: (
      default: $color-grey-300,
      hover: $color-grey-300,
      active: $color-grey-300
    ),
    bgs: (
      default: $color-blue-500,
      hover: $color-blue-700,
      active: $color-blue-900
    ),
    text: (
      default: $color-white,
      hover: $color-white,
      active: $color-grey-300
    )
  ),
  blue-secondary: (
    borders: (
      default: $color-blue-100,
      hover: $color-grey-300,
      active: $color-grey-300
    ),
    bgs: (
      default: $color-blue-100,
      hover: $color-blue-700,
      active: $color-blue-900
    ),
    text: (
      default: $color-grey-800,
      hover: $color-white,
      active: $color-grey-300
    )
  ),
  utility-primary-inactive: (
    borders: (
      default: $color-grey-300,
      hover: $color-grey-300,
      active: $color-grey-300
    ),
    bgs: (
      default: $color-white,
      hover: $color-white,
      active: $color-white
    ),
    text: (
      default: $color-grey-300,
      hover: $color-grey-300,
      active: $color-grey-300
    )
  ),
  utility-primary-red: (
    borders: (
      default: $color-utility-red-500,
      hover: $color-utility-red-800,
      active: $color-utility-red-900
    ),
    bgs: (
      default: $color-utility-red-500,
      hover: $color-utility-red-800,
      active: $color-utility-red-900
    ),
    text: (
      default: $color-white,
      hover: $color-white,
      active: $color-grey-300
    )
  ),
  utility-secondary-red: (
    borders: (
      default: $color-utility-red-500,
      hover: $color-utility-red-800,
      active: $color-utility-red-900
    ),
    bgs: (
      default: $color-white,
      hover: $color-utility-red-800,
      active: $color-utility-red-900
    ),
    text: (
      default: $color-grey-660,
      hover: $color-white,
      active: $color-grey-300
    )
  ),
  utility-primary-green: (
    borders: (
      default: $color-utility-green-500,
      hover: $color-utility-green-800,
      active: $color-utility-green-900
    ),
    bgs: (
      default: $color-utility-green-500,
      hover: $color-utility-green-800,
      active: $color-utility-green-900
    ),
    text: (
      default: $color-white,
      hover: $color-white,
      active: $color-grey-300
    )
  ),
  utility-secondary-green: (
    borders: (
      default: $color-utility-green-500,
      hover: $color-utility-green-800,
      active: $color-utility-green-900
    ),
    bgs: (
      default: $color-white,
      hover: $color-utility-green-800,
      active: $color-utility-green-900
    ),
    text: (
      default: $color-grey-660,
      hover: $color-white,
      active: $color-grey-300
    )
  )
);
