@import "../wireframe/_variables";

// ----- Colours ----- //
$black-olive: #3e3e3e;
$bright-navy-blue: #167ac6;
$granite-gray: #666666;
$isabelline: #cccccc;
$raisin-black: #212121;
$snow: #f9f9f9;
$white-smoke: #f5f5f5;
$white: #ffffff;
$black: #000000;
$trolley-grey: #7e7e7f;

// ----- Breakpoints ----- //
$DESKTOP_SIDE_GUTTER: 60px;
$TABLET_SIDE_GUTTER: 60px;
$MOBILE_SIDE_GUTTER: 20px;

$DESKTOP_SLICE_MARGIN: 60px;
$TABLET_SLICE_MARGIN: 60px;
$MOBILE_SLICE_MARGIN: 40px;

$DESKTOP_SIDE_GUTTER_BREAKPOINT: 1024px;
$TABLET_SIDE_GUTTER_BREAKPOINT: 700px;

$CARD_SWITCHER_WIDTH: 600px;
$CARD_LIST_2_COLUMN_BREAKPOINT: 600px;
$CARD_LIST_3_COLUMN_BREAKPOINT: 940px;
$CARD_LIST_4_COLUMN_BREAKPOINT: 1100px;

$FEATURE_LARGE_BREAKPOINT: 800px;
$SUPERFEATURE_LARGE_BREAKPOINT: 700px;

$TYPE_MEDIUM_COPY_WIDTH: 700px;
$TYPE_LARGE_COPY_WIDTH: 1024px;