/*
  * SCSS Variables
  */

$bp-small: 585px;
$bp-medium: 850px;
$bp-large: 1000px;
$bp-xlarge: 1190px;
$bp-site-max-width: 1440px;
$site-max-width: 1400px;

$base-icon-size: 22px;

$base-unit: 10px;

$base-font-size: 18px;
$secondary-font-size: 16px;
$error-font-size: 15px;

$padding-horizontal: 32px;
$padding-vertical: 24px;

$margin-vertical: 15px;

// If you add/remove these grays, don't forget to do the same in _utilities.scss#L134
$color-gray-5: #fafafa;
$color-gray-6: #f9f8f7;
$color-gray-10: #f2f2f2;
$color-gray-15: #eee;
$color-gray-20: #ebebeb;
$color-gray-25: #e8e8e8;
$color-gray-30: #a3a6a7;
$color-gray-35: #ddd;
$color-gray-40: #cfcfcf;
$color-gray-50: #a7a7a7;
$color-gray-52: #767a7b;
$color-gray-60: #969696;
$color-gray-65: #737373;
$color-gray-80: #555;
$color-gray-90: #333;
$color-gray-95: #222;
$color-gray-98: #181818;
$color-gray-99: #121212;
$color-gray-100: #000000;

$greyscale-black: #403e3d;
$greyscale-dark: #73706e;
$greyscale-medium: #bfbdbb;
$greyscale-light: #e6e4e3;

// Brand colours - primary
$brand-primary-base: #fab131;
$brand-primary-fg: $greyscale-black;
$brand-primary-bg: #f9f8f7;

// Brand colours - secondary
$brand-secondary-base: #7cb7b6;
$brand-secondary-fg: #377674;
$brand-secondary-bg: #e5f1f1;

$color-white: #ffffff;
$color-black: $color-gray-100;

$color-red: #ed5a3f;
$color-crusta: #f27c5e;
$color-red-transparent: rgba($color-red, 0.2);

$color-yellow: #fab131;
$color-yellow-60: #e99f03;
$color-yellow-hover: #f7a81d;
$color-faded-yellow: #fdd898;
$color-translucent-yellow: #fbbc50;

$color-green: #7cb7b6;
$color-green-80: #3c8280;
$color-green-transparent: rgba($color-green, 0.2);

$color-dark-beige: #99908a;
$color-light-beige: #faf7f5;

$color-brown-5: #f5f5f1;
$color-brown-25: $color-dark-beige;

$color-white-rgba: rgba(255, 255, 255, 1);
$color-white-semitransparent: rgba(255, 255, 255, 0.15);
$color-black-semitransparent: rgba(0, 0, 0, 0.15);
$color-black-semitransparent-darker: rgba(0, 0, 0, 0.2);
$color-black-semitransparent-darkest: rgba(0, 0, 0, 0.3);

$color-border: $color-gray-35;

// White labeling defaults
$color-brand-primary: $color-yellow !default;
$color-brand-secondary: $color-green !default;
$color-brand-tertiary: $color-red !default;

$card-container-header-height: 100px;
$card-border-radius: 3px;
$card-title-font-size: 24px;
$card-section-border-width: 6px;

/*
 * CSS Variables
 */

:root {
  --bp-small: $bp-small;
  --bp-medium: $bp-medium;
  --bp-large: $bp-large;
  --bp-xlarge: $bp-xlarge;
  --bp-site-max-width: $bp-site-max-width;
  --site-max-width: $site-max-width;

  --base-icon-size: $base-icon-size;

  --base-unit: $base-unit;

  --base-font-size: $base-font-size;
  --secondary-font-size: $secondary-font-size;
  --error-font-size: $error-font-size;

  --padding-horizontal: $padding-horizontal;
  --padding-vertical: $padding-vertical;

  --margin-vertical: $margin-vertical;

  --color-gray-5: $color-gray-5;
  --color-gray-6: $color-gray-6;
  --color-gray-10: $color-gray-10;
  --color-gray-15: $color-gray-15;
  --color-gray-20: $color-gray-20;
  --color-gray-25: $color-gray-25;
  --color-gray-30: $color-gray-30;
  --color-gray-35: $color-gray-35;
  --color-gray-40: $color-gray-40;
  --color-gray-50: $color-gray-50;
  --color-gray-52: $color-gray-52;
  --color-gray-60: $color-gray-60;
  --color-gray-65: $color-gray-65;
  --color-gray-80: $color-gray-80;
  --color-gray-90: $color-gray-90;
  --color-gray-95: $color-gray-95;
  --color-gray-98: $color-gray-98;
  --color-gray-99: $color-gray-99;
  --color-gray-100: $color-gray-100;

  --color-white: $color-white;
  --color-black: $color-black;

  --color-red: $color-red;
  --color-crusta: $color-crusta;
  --color-red-transparent: $color-red-transparent;

  --color-yellow: $color-yellow;
  --color-yellow-60: $color-yellow-60;
  --color-yellow-hover: $color-yellow-hover;
  --color-faded-yellow: $color-faded-yellow;
  --color-translucent-yellow: $color-translucent-yellow;

  --color-green: $color-green;
  --color-green-80: $color-green-80;
  --color-green-transparent: $color-green-transparent;

  --color-dark-beige: $color-dark-beige;
  --color-light-beige: $color-light-beige;

  --color-brown-5: $color-brown-5;
  --color-brown-25: $color-brown-25;

  --color-white-rgba: $color-white-rgba;
  --color-white-semitransparent: $color-white-semitransparent;
  --color-black-semitransparent: $color-black-semitransparent;
  --color-black-semitransparent-darker: $color-black-semitransparent-darker;
  --color-black-semitransparent-darkest: $color-black-semitransparent-darkest;

  --color-border: $color-border;

  --card-container-header-height: $card-container-header-height;
  --card-border-radius: $card-border-radius;
  --card-title-font-size: $card-title-font-size;
  --card-section-border-width: $card-section-border-width;
}