/*
    This file was auto-generated by Brand.ai from the Elephant library design library. 
    To keep style values in sync across teams, changes to this file should be made directly from Brand.ai:
    https://brand.ai/styleguide/elephant-library
    Most recent file URL: https://assets.brand.ai/grahamdick/elephant-library/_style-params.css?key=Sy8iDPqmM
    Log-in via https://brand.ai to update the style values corresponding to this file. 

*/

:root {
/*
    Colors:
*/

// Primary colour palette
--color-butterfly-blush: #66499d;
--color-cape-cod: #313232;
--color-shady-lady: #adacad;
--color-concrete: #f2f2f2;
--color-shamrock: #2ebcb3;

// Secondary colour palette
--color-lightning-yellow: #f6b917;
--color-french-rose: #eb407a;
--color-spring-rain: #98cb98;
--color-piction-blue: #55c6ee;

// Other Colors
--color-text-colour: #454c50;

/*
    Font Styles:
*/

// Heading - Card Title font style
--font-heading-card-title-font-size: 18px;
--font-heading-card-title-line-height: 20px;
--font-heading-card-title-text-align: left;
--font-heading-card-title-color: #454c50;
--font-heading-card-title-font-style: normal;
--font-heading-card-title-font-weight: 400;
--font-heading-card-title-font-family: Stag;

--font-heading-card-title: {
  font-size: var(--font-heading-card-title-font-size);
  line-height: var(--font-heading-card-title-line-height);
  text-align: var(--font-heading-card-title-text-align);
  color: var(--font-heading-card-title-color);
  font-style: var(--font-heading-card-title-font-style);
  font-weight: var(--font-heading-card-title-font-weight);
  font-family: var(--font-heading-card-title-font-family);
};

// Heading - Client Name Title font style
--font-heading-client-name-title-font-size: 28px;
--font-heading-client-name-title-line-height: 28px;
--font-heading-client-name-title-text-align: left;
--font-heading-client-name-title-color: #454c50;
--font-heading-client-name-title-font-style: normal;
--font-heading-client-name-title-font-weight: 400;
--font-heading-client-name-title-font-family: Stag;

--font-heading-client-name-title: {
  font-size: var(--font-heading-client-name-title-font-size);
  line-height: var(--font-heading-client-name-title-line-height);
  text-align: var(--font-heading-client-name-title-text-align);
  color: var(--font-heading-client-name-title-color);
  font-style: var(--font-heading-client-name-title-font-style);
  font-weight: var(--font-heading-client-name-title-font-weight);
  font-family: var(--font-heading-client-name-title-font-family);
};

// Heading - Page Title font style
--font-heading-page-title-font-size: 17px;
--font-heading-page-title-line-height: 22px;
--font-heading-page-title-text-align: left;
--font-heading-page-title-color: #454c50;
--font-heading-page-title-font-style: normal;
--font-heading-page-title-font-weight: 600;
--font-heading-page-title-font-family: Open Sans;

--font-heading-page-title: {
  font-size: var(--font-heading-page-title-font-size);
  line-height: var(--font-heading-page-title-line-height);
  text-align: var(--font-heading-page-title-text-align);
  color: var(--font-heading-page-title-color);
  font-style: var(--font-heading-page-title-font-style);
  font-weight: var(--font-heading-page-title-font-weight);
  font-family: var(--font-heading-page-title-font-family);
};

// Text - XXL font style
--font-text-xxl-font-size: 20px;
--font-text-xxl-line-height: 24px;
--font-text-xxl-text-align: left;
--font-text-xxl-color: #454c50;
--font-text-xxl-font-style: normal;
--font-text-xxl-font-weight: 600;
--font-text-xxl-font-family: Open Sans;

--font-text-xxl: {
  font-size: var(--font-text-xxl-font-size);
  line-height: var(--font-text-xxl-line-height);
  text-align: var(--font-text-xxl-text-align);
  color: var(--font-text-xxl-color);
  font-style: var(--font-text-xxl-font-style);
  font-weight: var(--font-text-xxl-font-weight);
  font-family: var(--font-text-xxl-font-family);
};

// Text - Small font style
--font-text-small-font-size: 12px;
--font-text-small-line-height: 14px;
--font-text-small-text-align: left;
--font-text-small-color: #454c50;
--font-text-small-font-style: normal;
--font-text-small-font-weight: 400;
--font-text-small-font-family: Open Sans;

--font-text-small: {
  font-size: var(--font-text-small-font-size);
  line-height: var(--font-text-small-line-height);
  text-align: var(--font-text-small-text-align);
  color: var(--font-text-small-color);
  font-style: var(--font-text-small-font-style);
  font-weight: var(--font-text-small-font-weight);
  font-family: var(--font-text-small-font-family);
};

// Text - Normal Link font style
--font-text-normal-link-font-size: 14px;
--font-text-normal-link-line-height: normal;
--font-text-normal-link-text-align: left;
--font-text-normal-link-color: #2ebcb3;
--font-text-normal-link-font-style: normal;
--font-text-normal-link-font-weight: 400;
--font-text-normal-link-font-family: Open Sans;

--font-text-normal-link: {
  font-size: var(--font-text-normal-link-font-size);
  line-height: var(--font-text-normal-link-line-height);
  text-align: var(--font-text-normal-link-text-align);
  color: var(--font-text-normal-link-color);
  font-style: var(--font-text-normal-link-font-style);
  font-weight: var(--font-text-normal-link-font-weight);
  font-family: var(--font-text-normal-link-font-family);
};

// Text - Normal font style
--font-text-normal-font-size: 14px;
--font-text-normal-line-height: normal;
--font-text-normal-text-align: left;
--font-text-normal-color: #454c50;
--font-text-normal-font-style: normal;
--font-text-normal-font-weight: 400;
--font-text-normal-font-family: Open Sans;

--font-text-normal: {
  font-size: var(--font-text-normal-font-size);
  line-height: var(--font-text-normal-line-height);
  text-align: var(--font-text-normal-text-align);
  color: var(--font-text-normal-color);
  font-style: var(--font-text-normal-font-style);
  font-weight: var(--font-text-normal-font-weight);
  font-family: var(--font-text-normal-font-family);
};

// Text - Normal Bold font style
--font-text-normal-bold-font-size: 14px;
--font-text-normal-bold-line-height: 14px;
--font-text-normal-bold-text-align: left;
--font-text-normal-bold-color: #454c50;
--font-text-normal-bold-font-style: normal;
--font-text-normal-bold-font-weight: 600;
--font-text-normal-bold-font-family: Open Sans;

--font-text-normal-bold: {
  font-size: var(--font-text-normal-bold-font-size);
  line-height: var(--font-text-normal-bold-line-height);
  text-align: var(--font-text-normal-bold-text-align);
  color: var(--font-text-normal-bold-color);
  font-style: var(--font-text-normal-bold-font-style);
  font-weight: var(--font-text-normal-bold-font-weight);
  font-family: var(--font-text-normal-bold-font-family);
};

// Text - Large font style
--font-text-large-font-size: 16px;
--font-text-large-line-height: 16px;
--font-text-large-text-align: left;
--font-text-large-color: #454c50;
--font-text-large-font-style: normal;
--font-text-large-font-weight: 600;
--font-text-large-font-family: Open Sans;

--font-text-large: {
  font-size: var(--font-text-large-font-size);
  line-height: var(--font-text-large-line-height);
  text-align: var(--font-text-large-text-align);
  color: var(--font-text-large-color);
  font-style: var(--font-text-large-font-style);
  font-weight: var(--font-text-large-font-weight);
  font-family: var(--font-text-large-font-family);
};

// Nav Bar - Link Label font style
--font-nav-bar-link-label-font-size: 10px;
--font-nav-bar-link-label-line-height: normal;
--font-nav-bar-link-label-text-align: left;
--font-nav-bar-link-label-color: #454c50;
--font-nav-bar-link-label-letter-spacing: 0.11999999731779099px;
--font-nav-bar-link-label-font-style: normal;
--font-nav-bar-link-label-font-weight: 400;
--font-nav-bar-link-label-font-family: Open Sans;

--font-nav-bar-link-label: {
  font-size: var(--font-nav-bar-link-label-font-size);
  line-height: var(--font-nav-bar-link-label-line-height);
  text-align: var(--font-nav-bar-link-label-text-align);
  color: var(--font-nav-bar-link-label-color);
  letter-spacing: var(--font-nav-bar-link-label-letter-spacing);
  font-style: var(--font-nav-bar-link-label-font-style);
  font-weight: var(--font-nav-bar-link-label-font-weight);
  font-family: var(--font-nav-bar-link-label-font-family);
};

// Text - XL font style
--font-text-xl-font-size: 18px;
--font-text-xl-line-height: normal;
--font-text-xl-text-align: left;
--font-text-xl-color: #454c50;
--font-text-xl-font-style: normal;
--font-text-xl-font-weight: 600;
--font-text-xl-font-family: Open Sans;

--font-text-xl: {
  font-size: var(--font-text-xl-font-size);
  line-height: var(--font-text-xl-line-height);
  text-align: var(--font-text-xl-text-align);
  color: var(--font-text-xl-color);
  font-style: var(--font-text-xl-font-style);
  font-weight: var(--font-text-xl-font-weight);
  font-family: var(--font-text-xl-font-family);
};

/*
    Measurements:
*/

// Radius
--radius-button: 8px;

// Spacing
--spacing-spacing-8: 8px;
--spacing-spacing-16: 16px;
--spacing-spacing-32: 32px;

// Sizing
--sizing-sizing-0: 0;
--sizing-sizing-1: 1px;
--sizing-sizing-4: 4px;
--sizing-sizing-8: 8px;

/*
    Shadows:
*/

// Shadows
--shadow-card-shadow: 0 1px 4px 0 #B8B8B8;

}