@import '../wireframe/_variables';

// ----- Colours ----- //
$white: #ffffff;
$diamond: #f9f9f9;
$ballet-grey: #d4d4d3;
$candle-grey: #929090;
$ascot-grey: #4e4a4c;
$stroller-grey: #322e30;
$tux-grey: #141012;
$black: #000000;
$pink-rose: #ea356c;
$chestnut-rose: #d63152;
$sweet-pea: #ffb2ad;
$blossom: #fbe5e7;
$champagne: #ffeee2;
$sapphire: #038a99;
$azure: #dcedec;
$advert: #f9f9f8;

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

$DESKTOP_SLICE_MARGIN: 68px;
$TABLET_SLICE_MARGIN: 68px;
$MOBILE_SLICE_MARGIN: 44px;

$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: 1024px;

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

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