// @page Brand/Colours
// @name Primary palette
// @partial colour
//
// @description Our colours (with a “u”, we’re a UK company) are divided into primary, secondary and tertiary palettes. The primary and secondary are core to all our design work and supported by the tertiary which we use in infographics, graphs and the like. CMYK equivalents are available for print work.
//
// @variable c-cyan - Hero banners
// @variable c-navy - Text with emphasis
// @variable c-blue - Logo
// @variable c-typecyan - Text links, icons
// @variable c-typegrey - Body text
// @variable c-typegrey-2 - Text without emphasis
// @variable c-inputgrey - Dropdowns, icons
// @variable c-bordergrey - Borders
// @variable c-keylinegrey - Keylines, separators
// @variable c-bggrey - Backgrounds

$c-navy: #1c1f4e;
$c-blue: #174695;
$c-typecyan: #008fe9;
$c-cyan: #99e2ff;
$c-typegrey: #333;
$c-typegrey-2: #767676;
$c-inputgrey: #97999a;
$c-bordergrey: #bbb;
$c-keylinegrey: #eaeaea;
$c-bggrey: #f4f4f4;

// @page Brand/Colours
// @name Secondary palette
// @partial colour
//
// @variable c-red - Primary buttons
// @variable c-green - Action buttons, USPs
// @variable c-yellow - USPs
// @variable c-orange - USPs
// @variable c-purple - USPs
// @variable c-navy-light
// @variable c-blue-light
// @variable c-typecyan-light
// @variable c-cyan-light

$c-yellow: #ffd32f;
$c-orange: #f27930;
$c-purple: #9c55b8;
$c-red: #d64226;
$c-green: #2aaa5b;
$c-navy-light: #1a316e;
$c-blue-light: #0c72bf;
$c-typecyan-light: #4cc0f4;
$c-cyan-light: #e4f8ff;

// @page Brand/Colours
// @name Tertiary palette
// @partial colour
//
// @variable c-yellow-lightest
// @variable c-yellow-light
// @variable c-yellow-dark
//
// @variable c-orange-lightest
// @variable c-orange-light
// @variable c-orange-dark
//
// @variable c-purple-lightest
// @variable c-purple-light
// @variable c-purple-dark
//
// @variable c-red-lightest
// @variable c-red-light
// @variable c-red-dark
//
// @variable c-green-lightest
// @variable c-green-light
// @variable c-green-dark

$c-yellow-lightest: #ffedab;
$c-yellow-light: #ffe06d;
$c-yellow-dark: #d8b327;

$c-orange-lightest: #f9c9ac;
$c-orange-light: #f5a16e;
$c-orange-dark: #cd6628;

$c-purple-lightest: #d7bbe2;
$c-purple-light: #b988cd;
$c-purple-dark: #84489c;

$c-red-lightest: #eeb3a8;
$c-red-light: #e27a67;
$c-red-dark: #b53820;

$c-green-lightest: #a9ddbd;
$c-green-light: #69c38c;
$c-green-dark: #23904d;