:root {

  /* Colours */
  --color-primary: #283342;
  --color-primary-a: #334255;
  --color-primary-b: #4C6380;
  --color-primary-c: #4C6380E5;
  --color-primary-d: #EBEEF1;
  --color-primary-e: #D6DCEC;
  --color-secondary: #2A7D73;
  --color-secondary-a: #3A803F;
  --color-secondary-b: #335155;
  --color-secondary-c: #2A7D73E5;
  --color-secondary-d: #5BAD5F;
  --color-secondary-e: #C5E2C7;
  --color-secondary-f: #EAF3EA;
  --color-tertiary: #3E3355;
  --color-tertiary-a: #6B5893;
  --color-tertiary-b: #6b5893e5;
  --color-tertiary-c: #EFECF3;
  --color-logo-blue: #4C6380;
  --color-logo-green: #5BAD5F;
  --color-brand: var(--color-logo-blue);

  /*
    Grey Scale
    In this section, we define our greys; let's not have 50 shades
  */
  --color-white: #fff;
  --color-grey-light-aaa: #F0F0F0;
  --color-grey-light-aa: #CFD2D6;
  --color-grey-light-a: #CFD2D6;
  --color-grey: #1E1E1E;
  --color-grey-dark-b: #4b4846;
  --color-grey-dark-bb: #4b4846;
  --color-grey-dark-bbb: #4b4846;
  --color-black: #000;

  /* Fonts */
  --font-primary: "Raleway", sans-serif;
  --font-secondary: "Raleway", sans-serif;

  /* Font Sizes */
  /* Static Font Sizes */
  --base-font-size: 16px;
  --font-size-small-b: calc(var(--base-font-size) * 0.5);
  --font-size-small-a: calc(var(--base-font-size) * 0.75);
  --font-size-small: calc(var(--base-font-size) * 0.9);
  --font-size-medium: calc(var(--base-font-size) * 1);
  --font-size-large: calc(var(--base-font-size) * 1.29);
  --font-size-large-a: calc(var(--base-font-size) * 1.3125);
  --font-size-large-b: calc(var(--base-font-size) * 1.625);
  --font-size-large-c: calc(var(--base-font-size) * 1.75);
  --font-size-large-d: calc(var(--base-font-size) * 2.86);
  --font-size-large-e: calc(var(--base-font-size) * 3);

  /* Responsive Font Sizes */
  --font-size-responsive-from-small-b-to-small-a: clamp(var(--font-size-small-b), 1vw, var(--font-size-small-a));
  --font-size-responsive-from-small-a-to-small: clamp(var(--font-size-small-a), 2vw, var(--font-size-small));
  --font-size-responsive-from-small-to-medium: clamp(var(--font-size-small), 2vw, var(--font-size-medium));
  --font-size-responsive-from-medium-to-large: clamp(var(--font-size-medium), 2vw, var(--font-size-large));
  --font-size-responsive-from-large-a-to-large-b: clamp(var(--font-size-large-a), 6vw, var(--font-size-large-b));
  --font-size-responsive-from-large-b-to-large-c: clamp(var(--font-size-large-b), 7vw, var(--font-size-large-c));
  --font-size-responsive-from-large-c-to-large-d: clamp(var(--font-size-large-c), 8vw, var(--font-size-large-d));
  --font-size-responsive-from-large-d-to-large-e: clamp(var(--font-size-large-d), 9vw, var(--font-size-large-e));

  /* Applying Font Sizes */
  --font-size-body: var(--font-size-responsive-from-small-to-medium);
  --font-size-responsive-xxxxxx-large: var(--font-size-responsive-from-large-d-to-large-e);
  --font-size-responsive-xxxxx-large: var(--font-size-responsive-from-large-c-to-large-d);
  --font-size-responsive-xxxx-large: var(--font-size-responsive-from-large-b-to-large-c);
  --font-size-responsive-xxx-large: var(--font-size-responsive-from-large-a-to-large-b);
  --font-size-responsive-xx-large: var(--font-size-responsive-from-medium-to-large);
  --font-size-responsive-x-large: var(--font-size-responsive-from-small-to-medium);
  --font-size-responsive-large: var(--font-size-responsive-from-small-to-medium);
  --font-size-responsive-small: var(--font-size-responsive-from-small-a-to-small);
  --font-size-responsive-x-small: var(--font-size-responsive-from-small-b-to-small-a);

  /* Line Heights */
  --line-height: 1.3;
  --line-height-small-a: 1.2;
  --line-height-small-b: 1.1;
  --line-height-large-a: 1.75;
  --line-height-large-b: 2;

  /* Spacing Items */
  --vertical-rhythm-unit: clamp(var(--font-size-small), 2vw, var(--font-size-medium));
  --spacing: var(--vertical-rhythm-unit);
  --spacing-tiny: 1px;
  --spacing-xxxxsmall: calc(var(--spacing) * 0.25);
  --spacing-xxxsmall: calc(var(--spacing) * 0.33);
  --spacing-xxsmall: calc(var(--spacing) * 0.5);
  --spacing-xsmall: calc(var(--spacing) * 0.66);
  --spacing-small: calc(var(--spacing) * 0.75);
  --spacing-medium: var(--spacing);
  --spacing-large: calc(var(--spacing) * 1.25);
  --spacing-xlarge: calc(var(--spacing) * 1.33);
  --spacing-xxlarge: calc(var(--spacing) * 1.5);
  --spacing-xxxlarge: calc(var(--spacing) * 1.66);
  --spacing-xxxxlarge: calc(var(--spacing) * 1.75);
  --spacing-xxxxxlarge: calc(var(--spacing) * 2);

  /* Widths */
  --width-small: 600px;
  --width-medium: 768px;
  --width-large: 960px;
  --width-xlarge: 1280px;
  --width-xxlarge: 1440px;
  --width-xxxlarge: 1600px;
  --width-xxxxlarge: 1920px;
  --width-full-container: 100%;
  --width-full-screen: 100vw;
  --width-content-area: var(--width-xlarge);

  /* Heading line-height */
  --font-size-xxxxxx-line-height: var(--line-height-small-a);
  --font-size-xxxxx-large-line-height: var(--line-height-small-a);
  --font-size-xxxx-large-line-height: var(--line-height-small-b);
  --font-size-xxx-large-line-height: var(--line-height-small-b);
  --font-size-xx-large-line-height: var(--line-height);
  --font-size-x-large-line-height: var(--line-height);
  --font-size-large-line-height: var(--line-height);

  /* Heading font-weight */
  --heading-font-weight: bold;
  --font-size-xxxxxx-font-weight: var(--heading-font-weight);
  --font-size-xxxxx-large-font-weight: var(--heading-font-weight);
  --font-size-xxxx-large-font-weight: var(--heading-font-weight);
  --font-size-xxx-large-font-weight: var(--heading-font-weight);
  --font-size-xx-large-font-weight: var(--heading-font-weight);
  --font-size-x-large-font-weight: var(--heading-font-weight);
  --font-size-large-font-weight: var(--heading-font-weight);

  /* Borders */
  --border-width: var(--spacing-tiny);
  --border-width-large: var(--spacing-xsmall);
  --border-radius: 5px;/* var(--spacing-xxsmall);*/
  --border-radius-large: 10px; /*var(--spacing-small);*/
  --border-color: var(--color-grey-light-a);
  --border-color-dark: var(--color-grey-dark-b);
  --border-color-light: var(--color-grey-light-aa);
  --border-style: solid;
  --border: var(--border-width) var(--border-style) var(--border-color);
  --border-large: var(--border-width-large) var(--border-style) var(--border-color);
  --border-dark: var(--border-width) var(--border-style) var(--border-color-dark);
  --border-light: var(--border-width) var(--border-style) var(--border-color-light);

  /* Animation */
  --transition-time: 0.25s;

  /* Grids */
  --grid-columns: 12;
  --grid-gap: var(--vertical-rhythm-unit);
  --grid-gap-none: 0;
  --grid-gap-small: var(--spacing-small);
  --grid-gap-large: var(--spacing-large);

  /* Text */
  --color-text: var(--color-grey);
  --color-link: var(--color-primary);
  --color-link-focus: var(--color-primary-b);
  --font-size: var(--font-size-medium);
  --color-heading: var(--color-primary-b);

  /* Status */
  --color-alert: #a51b00;
  --color-alert-hsl: 10, 100%, 32%;
  --color-warning: #734c00;
  --color-warning-hsl: 40, 100%, 23%;
  --color-status: #325e1c;
  --color-status-hsl: 100, 54%, 24%;

  /* buttons */
  --button-bg: var(--color-secondary-a);
  --button-color: var(--color-white);
  --button-focus-bg: transparent;
  --button-focus-color: var(--color-secondary-a);

  /* Focus */
  --focus-outline-color: var(--color-primary);
  --focus-outline: 4px dotted var(--focus-outline-color);
  --focus-shadow-color: var(--color-white);
  --focus-shadow: 0 0 0 2px var(--focus-shadow-color);
}