// --------- colour vars ------------
$colour-blue-light: #a1d9f7;
$colour-blue-lightmid: #00b0eb;
$color-blue-check-hover: #00b1eb;
$colour-blue: #00b9f2;
$colour-blue-dark: #098dce;
$color-blue-check: #008ecf;

$colour-orange-light: #ffd7c3;
$colour-orange: #eb661a;
$colour-orange-dark: #d85414;

$colour-green-light: #e3f8cc;
$colour-green-lightmid: #a5d56c;
$colour-green: #69c400;
$colour-green-dark: #559e00;

$colour-red-light: #ffdde2;
$colour-red-lightmid: #f36f2e;
$colour-red: #e1001c;
$colour-red-dark: #b50016;

$colour-grey-xlight: #f8f8f8;
$colour-grey-light: #dedede;
$colour-grey-lightmid: #d8d8d8;
$colour-grey-mid: #4a464a;
$colour-grey-darkmid: #999;
$colour-grey-dark: #6d6d6d;
$colour-grey-xdark: #333;

$color-yellow-lightmid: #f5e342;

$colour-form-input-disabled: #ccc;
$colour-font-form-input-disabled: #666;

// ------------ fonts ------------
$font-default: "Open Sans", sans-serif !default;
$font-size-default: 16px !default;
$font-size-form: inherit !default;
$font-line-height-default: 1.375 !default;
$font-weight-light: 300 !default;
$font-weight-regular: 400 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-xbold: 800 !default;

// ------------ typography ------------
$typographic-scale: (
  body: (
    font-size: (
      default: $font-size-default,
    ),
    line-height: (
      default: $font-line-height-default,
    ),
  ),
  h1: (
    font-size: (
      default: calc(3.2rem / 100 * 62.5),
      medium: calc(4.8rem / 100 * 62.5),
      small: calc(4rem / 100 * 62.5),
    ),
    line-height: (
      default: 1.25,
      medium: 1.05,
      small: 1.125,
    ),
  ),
  h2: (
    font-size: (
      default: calc(2.6rem / 100 * 62.5),
      medium: calc(3.6rem / 100 * 62.5),
      small: calc(3.2rem / 100 * 62.5),
    ),
    line-height: (
      default: 1.15384615,
      medium: 1.25,
      small: 1.25,
    ),
  ),
  h3: (
    font-size: (
      default: calc(2.2rem / 100 * 62.5),
      medium: calc(2.8rem / 100 * 62.5),
      small: calc(2.4rem / 100 * 62.5),
    ),
    line-height: (
      default: 1.13636364,
      medium: 1.25,
      small: 1.25,
    ),
  ),
  h4: (
    font-size: (
      default: calc(1.8rem / 100 * 62.5),
      medium: calc(1.8rem / 100 * 62.5),
      small: calc(1.8rem / 100 * 62.5),
    ),
    line-height: (
      default: 1.11111,
      medium: 1.22222,
      small: 1.22222,
    ),
  ),
) !default;

// ------------ shapes ------------
$radius-default: 2px !default;

// ------------ forms ------------
$form-field-height: 2.45em !default;
$form-field-line-height: 2.45 !default;

// --------- grid ------------
$column-gutter: 15px !default;
$column-fraction-denominators: (1, 2, 3, 4, 5, 6, 7, 8) !default;

// Container widths
$container-width-large: 1170px !default;
$container-width-medium: 960px !default;
$container-width-small: 720px !default;

// Breakpoints
$screen-large: 1200px !default;
$screen-medium: 992px !default;
$screen-small: 768px !default;

// ------------ grid: main breakpoints ------------
$breakpoint-small: 20em !default;
$breakpoint-medium: 40em !default;
$breakpoint-large: 48.75em !default;
$breakpoint-xlarge: 64em !default;
$breakpoint-full: 80em !default;

// ---- z-index levels -------
$z-index-fly-outs: 100 !default;
$z-index-modals: 200 !default;

// -------- shared component vars ------

//input
$input-border-width: 1px !default;
$input-box-padding-x: 1em !default;

//enhanced select
$select-icon-width: 30px !default;

//notices
$notice-close-size: 20px !default;
//-- info notice
$notice-info-bg: $color-neutral-300 !default;
$notice-info-border-colour: $color-neutral-300 !default;
$notice-info-font-colour: $color-neutral-700 !default;
//-- success info
$notice-success-bg: $color-success-300 !default;
$notice-success-border-colour: $color-success-300 !default;
$notice-success-font-colour: $color-neutral-700 !default;
//-- error notice
$notice-error-bg: $color-alert-300 !default;
$notice-error-border-colour: $color-alert-300 !default;
$notice-error-font-colour: $color-neutral-700 !default;

//modals
$modal-close-size: 16px !default;

//panels
$panel-close-size: 16px !default;

//tables
$table-border-colour: $colour-grey-light !default;

//accordions
$accordion-chrome-icon-size: 0.75em !default;
$accordion-chrome-padding: 1em !default;

//search form
$search-form-icon-size: 1.375em !default;

//carousel
$carousel-prev-next-size: 32px !default;

//video
$video-play-size: 100px !default;
$video-close-size: 20px !default;

//button
$button-height: 40px;