:root {

  /* COLORS */
  --black-100: #000;
  --black-200: #1c1c1c;
  --black-300: #2e2e2e;
  --white-100: #fff;
  --white-200: #f3f3f3;
  --grey-100: #757575;
  --grey-200: #b4b4b4;
  --yellow-100: #ffd700;
  --blue-100: #0073e6;
  --red-100: #ff0000;
  --green-100: #00a000;
  --transparent-200: #00000029;
  --transparent-300: #0000004D;
  --transparent-400: #ffffff90;

  /* FONT FAMILIES */
  --font-family-heading: "Urbanist", sans-serif;
  --font-family-text: "Urbanist", sans-serif;
  --font-family-button: "Urbanist", sans-serif;
  --font-family-nav: "Urbanist", sans-serif;

  /* FONT SIZES */
  --font-size-xxs: 0.75rem;   /* 12px */
  --font-size-xs: 0.875rem;   /* 14px */
  --font-size-s: 1rem;        /* 16px */
  --font-size-m: 1.125rem;    /* 18px */
  --font-size-l: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.75rem;   /* 28px */
  --font-size-3xl: 2rem;      /* 32px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 2.5rem;    /* 40px */
  --font-size-6xl: 3rem;      /* 48px */

  /* FONT WEIGHTS */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* LINE HEIGHTS */
  --line-height-xs: 1.25;
  --line-height-s: 1.5;
  --line-height-m: 1.625;
  --line-height-l: 2;

  /* LETTER SPACING */
  --letter-spacing-xs: 0.1rem;
  --letter-spacing-s: 0.15rem;
  --letter-spacing-m: 0.2rem;
  --letter-spacing-l: 0.25rem;

  /* OTHER VARIABLES */
  --box-shadow: 0 2px 10px var(--transparent-200);
  --page-width: 77.5rem;
  --image-overlay: linear-gradient(var(--transparent-300), var(--transparent-300));
  --border-primary: 1px solid var(--black-100);
  --border-secondary: 1px solid var(--grey-200);
  --border-transparent: 1px solid transparent;
  --border-current: 1px solid currentColor;
  --skeleton-start-bg-color: var(--grey-200);
  --skeleton-end-bg-color: var(--white-200);
}