:root {
  /* The main color of the template, used on buttons, links, etc */
  --primary-clr: #0055b8;

  /* The hover state of many elements */
  --secondary-clr: #000000;

  /* Enabled with vibrant mode, changes some elements to this color for added flair */
  --tertiary-clr: #e07b39;

  /* Used for borders */
  --light-clr:#efefee;

  /* Used for text */
  --dark-clr: #000000;

  /* Used for inputs and as a light background on some elements like checkout tables */
  --gray-clr: #efefee;

  /* The hover state for inputs */
  --gray-clr-hovered: #efefee;

  /* The background color used for when the logo in the header is a light color */
  --light-logo-bg: #0055b8;
}