:root {
  /* Primary brand colors */
  --hib-primary: var(--glaucous);

  /* Background gradients */
  --hib-bg-gradient-start: var(--vista-blue);
  --hib-bg-gradient-end: var(--periwinkle);

  /* CSS HEX */
  --smoky-black: #191308ff;
  --raisin-black: #242120ff;
  --jet: #2f2f37ff;
  --delft-blue: #454b66ff;
  --ultra-violet: #56648fff;
  --glaucous: #677db7ff;
  --vista-blue: #8290c9ff;
  --vista-blue-2: #9ca3dbff;
  --periwinkle: #a5abdeff;

  /* CSS HSL */
  --smoky-black: hsla(39, 52%, 6%, 1);
  --raisin-black: hsla(15, 6%, 13%, 1);
  --jet: hsla(240, 8%, 20%, 1);
  --delft-blue: hsla(229, 19%, 34%, 1);
  --ultra-violet: hsla(225, 25%, 45%, 1);
  --glaucous: hsla(224, 36%, 56%, 1);
  --vista-blue: hsla(228, 40%, 65%, 1);
  --vista-blue-2: hsla(233, 47%, 74%, 1);
  --periwinkle: hsla(234, 46%, 76%, 1);

  /* CSS HEX */
  --brown: #813405ff;
  --syracuse-red-orange: #d45113ff;
  --carrot-orange: #f9a03fff;
  --earth-yellow: #f9bf72ff;
  --sunset: #f9ce8bff;
  --peach-yellow: #f8dda4ff;
  --papaya-whip: #fceed2ff;
  --old-lace: #fef7e9ff;
  --floral-white: #fffbf4ff;
  --white: #ffffffff;

  /* CSS HSL */
  --brown: hsla(23, 93%, 26%, 1);
  --syracuse-red-orange: hsla(19, 84%, 45%, 1);
  --carrot-orange: hsla(31, 94%, 61%, 1);
  --earth-yellow: hsla(34, 92%, 71%, 1);
  --sunset: hsla(37, 90%, 76%, 1);
  --peach-yellow: hsla(41, 86%, 81%, 1);
  --papaya-whip: hsla(40, 88%, 91%, 1);
  --old-lace: hsla(40, 91%, 95%, 1);
  --floral-white: hsla(38, 100%, 98%, 1);
  --white: hsla(0, 0%, 100%, 1);

  /* CSS HEX */
  --emerald: #5fd9a6ff;
  --emerald-2: #57c47dff;
  --pigment-green: #4eae54ff;
  --dark-pastel-green: #47c64eff;
  --sgbus-green: #3fde47ff;
  --lime-green: #40ca47ff;
  --dark-pastel-green-2: #40b646ff;
  --forest-green: #408d44ff;
  --dark-spring-green: #316c34ff;

  /* CSS HSL */
  --emerald: hsla(155, 62%, 61%, 1);
  --emerald-2: hsla(141, 48%, 55%, 1);
  --pigment-green: hsla(124, 38%, 49%, 1);
  --dark-pastel-green: hsla(123, 53%, 53%, 1);
  --sgbus-green: hsla(123, 71%, 56%, 1);
  --lime-green: hsla(123, 57%, 52%, 1);
  --dark-pastel-green-2: hsla(123, 48%, 48%, 1);
  --forest-green: hsla(123, 38%, 40%, 1);
  --dark-spring-green: hsla(123, 38%, 31%, 1);

}