:root,
*::after,
*::before {
  /* Colours */
  --anrt-color-primary: #23498d;
  --anrt-color-primary-a: #047d9e;
  --anrt-color-primary-a10: #037696;
  --anrt-color-primary-aa: #009fbd;
  --anrt-color-primary-b: #152c55;
  --anrt-color-primary-b-50: #152c5550;
  --anrt-color-secondary: #048270;
  --anrt-color-secondary-a: #448132;
  --anrt-color-tertiary: #706f70;
  --anrt-color-tertiary-a: #575757;
  --anrt-color-danger: #ac1816;

  /*
    Grey Scale
    In this section, we define our greys; let's not have 50 shades
  */
  --anrt-color-white: #fff;
  --anrt-color-grey-light-aaa: #f9f9f9;
  --anrt-color-grey-light-aa: #eaeaea;
  --anrt-color-grey-light-a: #cecfd0;
  --anrt-color-grey: #b1b4b6;
  --anrt-color-grey-dark-b: #505a5f;
  --anrt-color-grey-dark-bb: #505a5f;
  --anrt-color-grey-dark-bbb: #505a5f;
  --anrt-color-black: #000;
  --anrt-color-tertiary-20: #706f7020;
  --anrt-color-tertiary-10: #706f6f10;

  /* Named colors */
  --anrt-color-text: var(--anrt-color-tertiary);
  --anrt-color-heading: var(--anrt-color-black);
  --anrt-color-link: var(--anrt-color-primary);

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

  /* Font Base Sizes */
  --anrt-font-base-desktop: 18px;
  --anrt-font-base-mobile: 16px;

  /* Scale Value */
  --anrt-font-scale-desktop: 1.33;
  --anrt-font-scale-mobile: 1.25;

  --anrt-font-scale: var(--anrt-font-scale-mobile);
  --anrt-font-base: var(--anrt-font-base-mobile);

  /* Semantic Font */
  /* Steps font-size=font-base × (font-scale ^ font-step) */
  --anrt-font-step--2: calc(
    var(--anrt-font-base) / var(--anrt-font-scale) / var(--anrt-font-scale)
  );
  --anrt-font-step--1: calc(var(--anrt-font-base) / var(--anrt-font-scale));
  --anrt-font-step-0: var(--anrt-font-base);
  --anrt-font-step-1: calc(var(--anrt-font-base) * var(--anrt-font-scale));
  --anrt-font-step-2: calc(
    var(--anrt-font-base) * var(--anrt-font-scale) * var(--anrt-font-scale)
  );
  --anrt-font-step-3: calc(
    var(--anrt-font-base) * var(--anrt-font-scale) * var(--anrt-font-scale) *
      var(--anrt-font-scale)
  );
  --anrt-font-step-4: calc(
    var(--anrt-font-base) * var(--anrt-font-scale) * var(--anrt-font-scale) *
      var(--anrt-font-scale) * var(--anrt-font-scale)
  );
  --anrt-font-step-5: calc(
    var(--anrt-font-base) * var(--anrt-font-scale) * var(--anrt-font-scale) *
      var(--anrt-font-scale) * var(--anrt-font-scale) * var(--anrt-font-scale)
  );
  --anrt-font-step-6: calc(
    var(--anrt-font-base) * var(--anrt-font-scale) * var(--anrt-font-scale) *
      var(--anrt-font-scale) * var(--anrt-font-scale) * var(--anrt-font-scale) *
      var(--anrt-font-scale)
  );

  --anrt-font-size-h1: var(--anrt-font-step-3);
  --anrt-font-size-h2: var(--anrt-font-step-2);
  --anrt-font-size-h3: var(--anrt-font-step-1);
  --anrt-font-size-h4: var(--anrt-font-step-0);
  --anrt-font-size-h5: var(--anrt-font-step-0);
  --anrt-font-size-h6: var(--anrt-font-step-0);
  --anrt-font-size-default: var(--anrt-font-step-0);
  --anrt-font-size-small: var(--anrt-font-step--1);
  --anrt-font-size-tiny: var(--anrt-font-step--2);

  /* --anrt-font-size-l: var(--anrt-font-step-1);
  --anrt-font-size-xl: var(--anrt-font-step-2);
  --anrt-font-size-xxl: var(--anrt-font-step-3); */
  --anrt-font-size-3xl: var(--anrt-font-step-4);
  --anrt-font-size-4xl: var(--anrt-font-step-5);
  --anrt-font-size-5xl: var(--anrt-font-step-6);

  /* Line Heights */
  --anrt-line-height-xsmall: 1;
  --anrt-line-height-small: 1.2;
  --anrt-line-height-default: 1.5;
  --anrt-line-height-large: 1.6;

  /* Spacing Items */
  --anrt-vertical-rhythm-unit: calc(
    var(--anrt-font-size-default) * var(--anrt-line-height-default)
  );
  --anrt-spacing-default: var(--anrt-vertical-rhythm-unit);
  --anrt-spacing-tiny: 1px;
  --anrt-spacing-025: calc(var(--anrt-spacing-default) * 0.25); /* 6.75px */
  --anrt-spacing-033: calc(var(--anrt-spacing-default) * 0.33); /* 8.91px */
  --anrt-spacing-050: calc(var(--anrt-spacing-default) * 0.5); /* 13.5px */
  --anrt-spacing-066: calc(var(--anrt-spacing-default) * 0.66); /* 17.81px */
  --anrt-spacing-075: calc(var(--anrt-spacing-default) * 0.75); /* 20.25px */
  --anrt-spacing-100: var(--anrt-spacing-default); /* 27px */
  --anrt-spacing-125: calc(var(--anrt-spacing-default) * 1.25); /* 33.75px */
  --anrt-spacing-133: calc(var(--anrt-spacing-default) * 1.33); /* 35.91px */
  --anrt-spacing-150: calc(var(--anrt-spacing-default) * 1.5); /* 40.5px */
  --anrt-spacing-166: calc(var(--anrt-spacing-default) * 1.66); /* 44.81px */
  --anrt-spacing-175: calc(var(--anrt-spacing-default) * 1.75); /* 47.25px */
  --anrt-spacing-200: calc(var(--anrt-spacing-default) * 2); /* 54px */
  --anrt-spacing-250: calc(var(--anrt-spacing-default) * 2.5);
  --anrt-spacing-300: calc(var(--anrt-spacing-default) * 3); /* 81px */
  --anrt-spacing-400: calc(var(--anrt-spacing-default) * 4); /* 108px */
  --anrt-spacing-500: calc(var(--anrt-spacing-default) * 5);
  --anrt-spacing-600: calc(var(--anrt-spacing-default) * 6);

  /* Widths */
  --anrt-width-content-s: 37.5rem; /* 600px */
  --anrt-width-tablet-s: 48rem; /* 768px */
  --anrt-width-tablet-m: 60rem; /* 960px */
  --anrt-width-tablet-l: 64rem; /* 1024px */
  --anrt-width-desktop-s: 80rem; /* 1280px */
  --anrt-width-desktop-l: 90rem; /* 1440px */
  --anrt-width-desktop-xl: 120rem; /* 1920px */
  --anrt-width-full-container: 100%;
  --anrt-width-full-screen: 100vw;
  --anrt-width-content-area: var(--anrt-width-desktop-l);

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

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

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

  /* buttons */
  --anrt-button-bg: var(--anrt-color-primary);
  --anrt-button-color: var(--anrt-color-white);
  --anrt-button-border: var(--anrt-color-primary);
  --anrt-button-focus-bg: var(--anrt-color-primary);
  --anrt-button-focus-color: var(--anrt-color-white);
  --anrt-button-focus-border: var(--anrt-color-primary);

  --anrt-border-radius: 0.5rem;

  --icon-color: var(--anrt-color-primary-a);

  /* table styles */
  --anrt-table-row-even: rgba(21, 44, 85, 0.05);
  --anrt-table-row-odd: rgba(21, 44, 85, 0.02);
}
