:root {
  /* Colours */
  --anrt-color-primary: #a050e1;
  --anrt-color-primary-a: #6d7414;
  --anrt-color-primary-b: #001d90;
  --anrt-color-secondary: #ffe146;
  --anrt-color-secondary-a: #feeb8b;
  --anrt-color-secondary-b: #d2b838;
  --anrt-color-tertiary: #46ff93;
  --anrt-color-tertiary-a: #7effb4;
  --anrt-color-tertiary-b: #2cc86d;

  /* Sport Ireland Colors */
  --anrt-color-sport-ireland-story-heading: #2f3881;
  --anrt-color-sport-ireland-blue: #009de0;

  /*
    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;

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

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

  /* Font Base Sizes */
  --anrt-font-base-desktop: 18px;
  --anrt-font-base-tablet: 17px;
  --anrt-font-base-mobile: 16px;
  --anrt-font-scale-desktop: 1.33;
  --anrt-font-scale-tablet: 1.25;
  --anrt-font-scale-mobile: 1.25;

  /* set defaults: */
  --anrt-font-scale: var(--anrt-font-scale-mobile);
  --anrt-font-base: var(--anrt-font-base-mobile);

  /* 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));

  /* Named font sizes */
  --anrt-font-size-050: 0.5rem;
  --anrt-font-size-075: 0.75rem;
  --anrt-font-size-100: 1rem;
  --anrt-font-size-125: 1.25rem;
  --anrt-font-size-150: 1.5rem;
  --anrt-font-size-175: 1.75rem;
  --anrt-font-size-200: 2rem;
  --anrt-font-size-250: 2.5rem;
  --anrt-font-size-300: 3rem;
  --anrt-font-size-400: 4rem;
  --anrt-font-size-500: 5rem;
  --anrt-font-size-600: 6rem;
  --anrt-font-size-800: 8rem;
  --anrt-font-size-heading-1: var(--anrt-font-step-4);
  --anrt-font-size-heading-2: var(--anrt-font-step-3);
  --anrt-font-size-heading-3: var(--anrt-font-step-2);
  --anrt-font-size-heading-4: var(--anrt-font-step-1);
  --anrt-font-size-heading-5: var(--anrt-font-step-0);
  --anrt-font-size-heading-6: var(--anrt-font-step-0);
  --anrt-font-size-body: var(--anrt-font-step-0);
  --anrt-font-size-small: var(--anrt-font-step--1);

  /* 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: 1.5;
  --anrt-vertical-rhythm-unit: 1.5rem;
  --anrt-spacing-default: var(--anrt-vertical-rhythm-unit);
  --anrt-spacing-tiny: 1px;
  --anrt-spacing-025: calc(var(--anrt-spacing-default) * 0.25);
  --anrt-spacing-033: calc(var(--anrt-spacing-default) * 0.33);
  --anrt-spacing-050: calc(var(--anrt-spacing-default) * 0.5);
  --anrt-spacing-066: calc(var(--anrt-spacing-default) * 0.66);
  --anrt-spacing-075: calc(var(--anrt-spacing-default) * 0.75);
  --anrt-spacing-100: var(--anrt-spacing-default);
  --anrt-spacing-125: calc(var(--anrt-spacing-default) * 1.25);
  --anrt-spacing-133: calc(var(--anrt-spacing-default) * 1.33);
  --anrt-spacing-150: calc(var(--anrt-spacing-default) * 1.5);
  --anrt-spacing-166: calc(var(--anrt-spacing-default) * 1.66);
  --anrt-spacing-175: calc(var(--anrt-spacing-default) * 1.75);
  --anrt-spacing-200: calc(var(--anrt-spacing-default) * 2);
  --anrt-spacing-250: calc(var(--anrt-spacing-default) * 2.5);
  --anrt-spacing-300: calc(var(--anrt-spacing-default) * 3);
  --anrt-spacing-400: calc(var(--anrt-spacing-default) * 4);
  --anrt-spacing-500: calc(var(--anrt-spacing-default) * 5);

  /* Grid/Gaps */
  --anrt-grid-columns-mobile: 4;
  --anrt-grid-columns-tablet: 12;
  --anrt-grid-columns-laptop: 12;
  --anrt-grid-columns-desktop: 12;
  --anrt-gap-mobile: var(--anrt-spacing-100);
  --anrt-gap-tablet: var(--anrt-spacing-120);
  --anrt-gap-laptop: var(--anrt-spacing-150);
  --anrt-gap-desktop: var(--anrt-spacing-200);
  --anrt-gap-inline-mobile: var(--anrt-spacing-050);
  --anrt-gap-inline-tablet: var(--anrt-spacing-100);
  --anrt-gap-inline-laptop: var(--anrt-spacing-150);
  --anrt-gap-inline-desktop: var(--anrt-spacing-200);
  --anrt-gap-block-mobile: var(--anrt-spacing-100);
  --anrt-gap-block-tablet: var(--anrt-spacing-125);
  --anrt-gap-block-laptop: var(--anrt-spacing-150);
  --anrt-gap-block-desktop: var(--anrt-spacing-200);

  /* set default grid and gap values */
  --anrt-grid-columns: var(--anrt-grid-columns-mobile);
  --anrt-gap: var(--anrt-gap-mobile);
  --anrt-gap-inline: var(--anrt-gap-inline-mobile);
  --anrt-gap-block: var(--anrt-gap-block-mobile);

  /* Rem Widths */
  --anrt-width-xxs: 20rem; /* 320px */
  --anrt-width-xs: 30rem; /* 480px */
  --anrt-width-s: 37.5rem; /* 600px */
  --anrt-width-m: 48rem; /* 768px */
  --anrt-width-l: 60rem; /* 960px */
  --anrt-width-xl: 64rem; /* 1024px */
  --anrt-width-xxl: 80rem; /* 1280px */
  --anrt-width-3xl: 90rem; /* 1440px */
  --anrt-width-4xl: 100rem; /* 1600px */
  --anrt-width-5xl: 122.5rem; /* 1960px */

  /* Device Widths */
  --anrt-width-mobile-s: var(--anrt-width-xxs); /* 320px */
  --anrt-width-mobile-m: var(--anrt-width-xs); /* 480px */
  --anrt-width-mobile-l: var(--anrt-width-s); /* 600px */
  --anrt-width-tablet-s: var(--anrt-width-m); /* 768px */
  --anrt-width-tablet-m: var(--anrt-width-m); /* 896px */
  --anrt-width-tablet-l: var(--anrt-width-xl); /* 1024px */
  --anrt-width-laptop-s: var(--anrt-width-xl); /* 1024px */
  --anrt-width-laptop-m: var(--anrt-width-xxl); /* 1280px */
  --anrt-width-laptop-l: var(--anrt-width-3xl); /* 1440px */
  --anrt-width-desktop-s: var(--anrt-width-xxl); /* 1280px */
  --anrt-width-desktop-m: var(--anrt-width-3xl); /* 1440px */
  --anrt-width-desktop-l: var(--anrt-width-4xl); /* 1600px */
  --anrt-width-desktop-xl: var(--anrt-width-5xl); /* 1920px */

  /* Semantic width */
  --anrt-width-full-container: 100%;
  --anrt-width-full-screen: 100vw;
  --anrt-width-content: var(--anrt-width-tablet-l);
  --anrt-width-default: var(--anrt-width-xxl); /* Most common width */
  --anrt-width-wide: var(--anrt-width-3xl);

  /* Animation */
  --anrt-transition-time: 0.3s;
  --anrt-transition-ease: ease-in-out;
  --anrt-transition: all var(--anrt-transition-time) var(--anrt-transition-ease);

  /* 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);
}

/* Responsive variables */
/* mobile */
@media screen and (min-width: 20rem) {
  /* defaults already set */
}

/* tablet */
@media screen and (min-width: 48rem) {
  :root {
    --anrt-grid-columns: var(--anrt-grid-columns-tablet);
    --anrt-gap: var(--anrt-gap-tablet);
    --anrt-gap-inline: var(--anrt-gap-inline-tablet);
    --anrt-gap-block: var(--anrt-gap-block-tablet);
    --anrt-font-scale: var(--anrt-font-scale-tablet);
    --anrt-font-base: var(--anrt-font-base-tablet);
  }
}

/* laptop */
@media screen and (min-width: 64rem) {
  :root {
    --anrt-grid-columns: var(--anrt-grid-columns-laptop);
    --anrt-gap: var(--anrt-gap-laptop);
    --anrt-gap-inline: var(--anrt-gap-inline-laptop);
    --anrt-gap-block: var(--anrt-gap-block-laptop);
  }
}

/* desktop */
@media screen and (min-width: 90rem) {
  :root {
    --anrt-grid-columns: var(--anrt-grid-columns-desktop);
    --anrt-gap: var(--anrt-gap-desktop);
    --anrt-gap-inline: var(--anrt-gap-inline-desktop);
    --anrt-gap-block: var(--anrt-gap-block-desktop);
    --anrt-font-scale: var(--anrt-font-scale-desktop);
    --anrt-font-base: var(--anrt-font-base-desktop);
  }
}