:root {
  /* neutrals */
  --color-white: white;
  --color-gray-100: #fafafa;
  --color-gray-200: #f3f1eb;
  --color-gray-300: #e9e9e9;
  --color-gray-400: #d6d6d6;
  --color-gray-500: #cbcbcb;
  --color-gray-600: #c5d5c8;
  --color-gray-700: #a2b2bd;
  --color-gray-800: #8d8d8d;
  --color-gray-900: #666;
  --color-black: black;

  /* defaults */
  --color-red: #c8102e;
  --color-madder: #a01e2a;
  --color-rosewood: #6c1d20;
  --color-chili: #e03b24;
  --color-cinnamon: #b05e36;
  --color-deep-rust: #a94f11;
  --color-yellow: #fc0;
  --color-asparagus: #799a3c;
  --color-green: #64a338;
  --color-xanadu: #5e7d61;
  --color-moss: #59632c;
  --color-robin: #3dcbda;
  --color-blue: #1b64b4;
  --color-lapis: #3865a3;
  --color-steel: #a2b1bc;
  --color-gray: #40596b;
  --color-charcoal: #333f48;
  --color-dark-charcoal: #262626;

  /* shadows */
  --shadow-100: rgba(0 0 0 / 7%);
  --shadow-200: rgba(0 0 0 / 33.3%);
  --shadow-300: rgba(0 0 0 / 50%);
  --shadow-400: rgba(0 0 0 / 66.6%);
  
  /* overlays */;
  --overlay-light: rgba(255 255 255 / 95%);
  --overlay-lighter: rgba(255 255 255 / 50%);
  --overlay-charcoal: rgba(51 63 72 / 35%);
  --overlay-charcoal-dark: rgba(51 63 72 / 60%);
}