:root {
  --green-primary: #004225;
  --green-secondary: #007642;
  --green-tertiary: #00B967;
  --green-tertiary-hover: #40D47E;
  --green-darker: #00361E;
  --green-lighter: #87A698;
  --green-light: #DEE7E3;
  --grass-green-primary: #71AB0B;
  --grass-green-secondary: #A7F126;
  --orange-primary: #CC9900;
  --orange-secondary: #876500;
  --orange-tertiary: #EC971F;
  --orange-tetradic: #FBEAD2;
  --red-primary: #CC0000;
  --red-secondary: #DA534F;
  --grey-primary: #333333;
  --grey-secondary: #979797;
  --grey-tertiary: #DDDDDD;
  --grey-tetradic: #F5F5F5;
  --grey-pentadic: #CCCCCC;
  --grey-green: #3B4841;
  --grey-orange: #BCB6B2;
  --grey-purple: #34324b;
  --grey-dark: #4B4B4B;
  --grey-white: #F9F9F9;
  --black: #000000;
  --white: #FFFFFF;
  --yellow: #FFCC00;
  --yellow-secondary: #FFAE00;
  --yellow-tertiary: #D7AF24;
  --blue-badge: #428bca;
  --blue-border: #3276b1;
  --blue-dark: #34495e;
  --gender-female: #e04998;
  --gender-male: #4dafe4;
  --gender-non-binary: #9756CA;
  --gender-unknown: #87aa87;
  --pos-purple: #9b59b6;
  --pos-teal: #1abc9c;
  --spacer-0: 0rem;
  --spacer-1: calc(1rem * .25);
  --spacer-2: calc(1rem * .5);
  --spacer-3: 1rem;
  --spacer-4: calc(1rem * 1.5);
  --spacer-5: calc(1rem * 3);
  
  
/*  https://css-tip.com/color-shades-color-mix/  */
/*
  --color-primary: #004225;  any format you want here 
  --color-primary-100: hsl(from var(--color-primary) h s calc(l - 1));
  --color-primary-200: hsl(from var(--color-primary) h s calc(l - 2));
  --color-primary-300: hsl(from var(--color-primary) h s calc(l - 3));
  --color-primary-400: hsl(from var(--color-primary) h s calc(l - 4));
  --color-primary-500: hsl(from var(--color-primary) h s calc(l - 5));
  --color-primary-600: hsl(from var(--color-primary) h s calc(l - 6));
  --color-primary-700: hsl(from var(--color-primary) h s calc(l - 7));
  --color-primary-800: hsl(from var(--color-primary) h s calc(l - 8));
  --color-primary-900: hsl(from var(--color-primary) h s calc(l - 9));
  --color-primary-1000: hsl(from var(--color-primary) h s calc(l - 10));
*/
  
/*   https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient */
/*
   background:
      linear-gradient(to right,var(--color-primary),var(--color-primary-1000));
*/
}