SCSS variables

// Settings.
$browser-minimum-versions:  (ie: '8');

// Compass Vertical Rhythm Settings
$base-font-size: 14px; // Sets the base font size
$base-line-height: 6px; // Sets the base line height, this acts as a vertical baseline grid.

// Breakpoints.
$breakpoint_small:   720px;
$breakpoint_medium:  992px;
$breakpoint_large:  1200px;
$breakpoint_skyscraper_advert: 1366px;

// Relative breakpoints.
$breakpoint_rxsmall:   30em;
$breakpoint_rsmall:   45em;
$breakpoint_rmediumsmall:  56em;
$breakpoint_rmedium:  62em;
$breakpoint_rmediumlarge:  72em;
$breakpoint_rlarge:  75em;
$breakpoint_rxlarge:  100em;
$breakpoint_rxxlarge:  119.14286em;

$relative_breakpoints: (
  rxsmall: $breakpoint_rxsmall,
  rsmall: $breakpoint_rsmall,
  rmediumsmall: $breakpoint_rmediumsmall,
  rmedium: $breakpoint_rmedium,
  rmediumlarge: $breakpoint_rmediumlarge,
  rlarge: $breakpoint_rlarge,
  rxlarge: $breakpoint_rxlarge,
  rxxlarge: $breakpoint_rxxlarge
);

// Vertical breakpoints.
$breakpoint_small_vertical: 480px;
$breakpoint_medium_vertical: 640px;
$breakpoint_large_vertical: 1440px;

// Ideal reading width.
$idealReadingWidth: 38em;

// Page sizes.
$min_width: 25.7rem; // This is equivalent to 360px when the HTML font-size is reduced to 87.5%.
$max_width: 114.3rem; // This is equivalent to 1600px when the HTML font-size is reduced to 87.5%.
$large_width: 85.714285714rem; // This is equivalent to 1200px when the HTML font-size is reduced to 87.5%.

// Page margins.
$page_margin_xsmall: 0.857145em;
$page_margin_medium: 1.71429em;
$page_margin_xxlarge: 0;

// @todo DF-903 Remove these and change the em variant (e.g. $page_margin_xsmall) to rem instead.
$page_margin_rxsmall: 0.857145rem;
$page_margin_rmedium: 1.71429rem;
$page_margin_rxxlarge: 0;

// Buttons.
$buttons_line-height: 1.28571em;
$buttons_vertical_padding: 12px;

// Colours.
$colour_white: #fff;

$colour_black: #000;

$colour_slate: #1f2935;
$colour_slate_1: #2d3c4d;
$colour_slate_2: #19212a;

$colour_monza: #e00023;
$colour_monza_1: #c70018;
$colour_monza_2: #b01721;
$colour_monza_3: #8c0013;

$colour_frenchrose: #f5587f;
$colour_frenchrose_1: #e31873;

$colour_sun: #fbaf17;
$colour_sun_1: #e5af17;
$colour_sun_2: #e39f15;
$colour_sun_3: #c48a10;

$colour_verdungreen: #759500;
$colour_verdungreen_1: #acc32b;
$colour_verdungreen_2: #94a924;
$colour_verdungreen_3: #759500;

$colour_teal: #117882;
$colour_teal_1: #048e98;
$colour_teal_2: #0e6068;
$colour_teal_3: #0e4d53;

$colour_denim: #1077d0;
$colour_denim_1: #51a8f5;
$colour_denim_2: #269aff;
$colour_denim_3: #005eb7;

$colour_bayofmany: #223992;

$colour_purple: #752482;
$colour_purple_1: #7e2a8c;
$colour_purple_2: #661777;
$colour_purple_3: #5e1d68;

$colour_grey: #f2f2f2;
$colour_grey_1: #e5e5e5;
$colour_grey_2: #ccc;
$colour_grey_3: #b2b2b2;
$colour_grey_4: #999;
$colour_grey_5: #7f7f7f;
$colour_grey_6: #666;
$colour_grey_7: #4c4c4c;
$colour_grey_8: #333;
$colour_grey_9: #191919;

// Text colours.
$colour_text: $colour_grey_8;
$colour_text_dark: $colour_grey_7;
$colour_text_light: $colour_grey_4;
$colour_text_disabled: $colour_grey_5;

// Notification Colours.
$colour_error: $colour_monza;
$colour_warning: $colour_grey_7;
$colour_warning_highlight: $colour_sun;
$colour_success: $colour_verdungreen;
$colour_information: $colour_grey_7;
$focus_outline: $colour_denim;

// Link colours.
$colour_link: $colour_denim;
$colour_link_dark: $colour_denim_3;
$colour_link_light: $colour_denim_1;
$link_visited: #7bbaf0;

// Cards and sections.
// @todo Should we have this?
$card_transparent: rgba(255, 255, 255, .91);

// Page backgrounds.
// @todo Should we have this?
$content_page_background-transparent: rgba($colour_slate, .96);

// Circle with border.
$circle-border-width: 8px;
$circle-border-colour: $colour_sun;
$circle-height: 120px;
$circle-width: 120px;

// Pi
$pi: 3.1415926536;

// Cards.
$card_shadow_offset_x: 0;
$card_shadow_offset_y: rem(7px);
$card_shadow_blur_radius: rem(25px);
$card_shadow_spread_radius: 0;
$card_shadow: $card_shadow_offset_x $card_shadow_offset_y $card_shadow_blur_radius $card_shadow_spread_radius rgba($colour_black, .25);
$card_shadow_slate: $card_shadow_offset_x $card_shadow_offset_y $card_shadow_blur_radius $card_shadow_spread_radius rgba($colour_black, .9);
$card_shadow_slate_translucent: $card_shadow_offset_x $card_shadow_offset_y $card_shadow_blur_radius $card_shadow_spread_radius rgba($colour_black, .6);

// Borders.
$border: 3px solid $colour_grey_1;