:root {

  /* Colours */
  /* Primary Colours */
  --color-primary: #04344a;
  --color-primary-a: #00476c;
  --color-primary-b: #156e91;
  --color-primary-c: #adb547;

  /* Secondrary Colours */
  --color-secondary: #031f2c;
  --color-secondary-a: #bfc570;
  --color-secondary-b: #cbdfe7;

  /*
    Grey Scale
    In this section, we define our greys; let's not have 50 shades
  */
  --color-white: #fff;
  --color-grey-light-aaa: #f9f9f9;
  --color-grey-light-aa: #dedede;
  --color-grey-light-a: #c6c6c6;
  --color-grey: #b1b4b6;
  --color-grey-dark-b: #5a5a5a;
  --color-grey-dark-bb: #505a5f; /* Not in use yet */
  --color-grey-dark-bbb: #001018;
  --color-black: #000;

  /* Fonts */
  --font-primary: raleway, roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-secondary: georgia, "Times New Roman", times, serif;

  /* Font Sizes */
  /* Static Font Sizes */
  --base-font-size: 16px;
  --font-size-small-b: calc(var(--base-font-size) * 0.5); /* 8px */
  --font-size-small-a: calc(var(--base-font-size) * 0.75); /* 12px */
  --font-size-small: calc(var(--base-font-size) * 0.9); /* 14px */
  --font-size-medium: calc(var(--base-font-size) * 1); /* 16px */
  --font-size-large: calc(var(--base-font-size) * 1.125); /* 18px */
  --font-size-large-a: calc(var(--base-font-size) * 1.3125); /* 21px */
  --font-size-large-aa: calc(var(--base-font-size) * 1.5); /* 24px */
  --font-size-large-b: calc(var(--base-font-size) * 1.75); /* 28px */
  --font-size-large-c: calc(var(--base-font-size) * 1.25); /* 35px */
  --font-size-large-d: calc(var(--base-font-size) * 2.25); /* 36px */
  --font-size-large-e: calc(var(--base-font-size) * 4.375); /* 70px */

  /* 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-to-large-a: clamp(var(--font-size-large), 6vw, var(--font-size-large-a));
  --font-size-responsive-from-large-a-to-large-aa: clamp(var(--font-size-large-a), 6vw, var(--font-size-large-aa));
  --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-aa);
  --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.5;
  --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-b), 2vw, var(--font-size-medium));
  --spacing: var(--vertical-rhythm-unit);
  --spacing-tiny: 1px;
  --spacing-xxxsmall: calc(var(--spacing) * 0.25);
  --spacing-xxsmall: calc(var(--spacing) * 0.33);
  --spacing-xsmall: calc(var(--spacing) * 0.5);
  --spacing-small: calc(var(--spacing) * 0.75);
  --spacing-medium: var(--spacing);
  --spacing-medium-l: calc(var(--spacing) * 1.25);
  --spacing-medium-xl: calc(var(--spacing) * 1.5);
  --spacing-medium-xxl: calc(var(--spacing) * 1.75);
  --spacing-large: calc(var(--spacing) * 2);
  --spacing-xlarge: calc(var(--spacing) * 3);
  --spacing-xxlarge: calc(var(--spacing) * 5);
  --spacing-xxxlarge: calc(var(--spacing) * 7);

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

  /* 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-a);
  --font-size-xxx-large-line-height: var(--line-height-small-a);
  --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: var(--spacing-xxsmall);
  --border-radius-large: var(--spacing-small);
  --border-radius-full: 999rem;
  --border-color: var(--color-primary-a);
  --border-color-dark: var(--color-black);
  --border-color-light: var(--color-grey-light-a);
  --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);

  /* Shadows */
  --box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  --text-shadow: 1px 1px 1px var(--color-black);

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

  /* 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-black);
  --color-link: var(--color-text);
  --font-size: var(--font-size-medium);
}