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

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

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

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

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

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

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

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