: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;
  --grey-footer: #252525;
  --grey-footer-text: #ACACAC;
  --grey-footer-border: #999999;
  --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;
  --error-border: #A94442;
  --error-bg: #f8eeee;
  --error-text: #A94442;
  --error-focus-glow: rgba(255, 0, 0, 0.6);
  --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));
*/

  /* Alpha variants — black */
  --black-5: rgba(0, 0, 0, 0.05);
  --black-6: rgba(0, 0, 0, 0.06);
  --black-7: rgba(0, 0, 0, 0.07);
  --black-8: rgba(0, 0, 0, 0.075);
  --black-10: rgba(0, 0, 0, 0.1);
  --black-12: rgba(0, 0, 0, 0.125);
  --black-15: rgba(0, 0, 0, 0.15);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-23: rgba(0, 0, 0, 0.23);
  --black-25: rgba(0, 0, 0, 0.25);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-35: rgba(0, 0, 0, 0.35);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-75: rgba(0, 0, 0, 0.75);

  /* Alpha variants — white */
  --white-6: rgba(255, 255, 255, 0.06);
  --white-7: rgba(255, 255, 255, 0.07);
  --white-13: rgba(255, 255, 255, 0.13);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-26: rgba(255, 255, 255, 0.26);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-80: rgba(255, 255, 255, 0.8);

  /* Alpha variants — green-primary (#004225) */
  --green-primary-25: rgba(0, 66, 37, 0.25);
  --green-primary-50: rgba(0, 66, 37, 0.5);
  --green-primary-80: rgba(0, 66, 37, 0.8);

  /* Alpha variants — grey-tetradic (#F5F5F5) */
  --grey-tetradic-60: rgba(245, 245, 245, 0.6);

  /* Alpha variants — yellow (#FFCC00) */
  --yellow-50: rgba(255, 204, 0, 0.5);

  /* Alpha variants — pos-teal (closest match to #16A085) */
  --pos-teal-30: rgba(22, 160, 133, 0.3);
  --pos-teal-85: rgba(22, 160, 133, 0.85);

  /* Alpha variants — misc (no exact color match in palette) */
  --grey-light-border-80: rgba(230, 230, 230, 0.8);
  --blue-focus-60: rgba(102, 175, 233, 0.6);


  /* Social media brand colors */
  --facebook-blue: #3b5998;
  --facebook-blue-dark: #344e86;
  --facebook-blue-darker: #30487b;
  --facebook-blue-darkest: #23345a;
  --twitter-blue: #00acee;
  --twitter-blue-dark: #00a1df;
  --twitter-blue-darker: #008fc5;
  --twitter-blue-darkest: #0075a2;

  /* Bootstrap 3 legacy component colors */
  --bs3-success: #5cb85c;
  --bs3-success-dark: #449d44;
  --bs3-danger-dark: #d62c1a;
  --bs3-danger-border: #c9302c;
  --bs3-danger-darker: #bf2718;
  --bs3-info-blue: #31b0d5;
  --bs3-info-text: #31708f;
  --bs3-warning: #f0ad4e;
  --bs3-warning-text: #8a6d3b;
  --bs3-primary-blue: #2a6496;
  --bs3-info-bg: #5bc0de;

  /* UI / status colors */
  --google-blue: #4d90fe;

  --light-red: #FF9FA0;
  --grey-medium: #777777;
  --grey-6f: #6f6f6f;
  --light-blue-bg: #c1d9ee;
  --light-green: #98cb69;
  --light-pink: #f2bbb5;
  --mint-green: #ccffcc;
  --pure-yellow: #FFFF00;
  --bright-green: #36b55a;
  --pink: #f49bc3;
  --grey-slider: #d3d3d3;

  /* Alpha variants — rgba(162, 234, 158) */
  --light-green-0: rgba(162, 234, 158, 0.0);
}