/* General */
:root {
	--border-radius: 4;
	--border-radius2x: 8;
	--default: var(--dark--100); 
}
/* Skin Colors */
:root {
	/* Base and darker shades */
	--primary: #1E90FF;
	--primary-100: #1E90FF;     /* ⚠️ NOT DEFINED - debug */
	--primary-200: #1E90FF;     /* ⚠️ NOT DEFINED - debug */
	--primary-300: #1E90FF;     /* ⚠️ NOT DEFINED - debug */

	/* Lighter shades (double dash) */
	--primary--100: #1E90FF;     /* ⚠️ NOT DEFINED - debug */
	--primary--200:#1E90FF;     /* ⚠️ NOT DEFINED - debug */
	--primary--300: #F8FBFF;  /* Your very light blue */

	/* Opacity variants - all use rgb(30, 144, 255) from #1E90FF */
	--primary-rgba-0: rgba(30, 144, 255, 0);
	--primary-rgba-3: rgba(30, 144, 255, 0.03);   /* Your 3% */
	--primary-rgba-5: rgba(30, 144, 255, 0.05);   /* Your 3% */
	--primary-rgba-7: rgba(30, 144, 255, 0.07);   /* Your 5% */
	--primary-rgba-10: rgba(30, 144, 255, 0.1);   /* Your 10% */
	--primary-rgba-15: rgba(30, 144, 255, 0.15);   /* Your 20% */
	--primary-rgba-20: rgba(30, 144, 255, 0.2);   /* Your 20% */
	--primary-rgba-30: rgba(30, 144, 255, 0.3); 
	--primary-rgba-35: rgba(30, 144, 255, 0.35); /* homepage hero backgorund */
	--primary-rgba-40: rgba(30, 144, 255, 0.4);   /* Your 40% */
	--primary-rgba-50: rgba(30, 144, 255, 0.5);   /* Your 50% */
	--primary-rgba-60: rgba(30, 144, 255, 0.6);
	--primary-rgba-70: rgba(30, 144, 255, 0.7);
	--primary-rgba-80: lime;     /* ⚠️ NOT DEFINED - debug */
	--primary-rgba-90: lime;     /* ⚠️ NOT DEFINED - debug */

	/* Base and darker shades */
	--secondary: #9D50BB;
	--secondary-100: red;      /* ⚠️ NOT DEFINED - debug */
	--secondary-200: red;      /* ⚠️ NOT DEFINED - debug */
	--secondary-300: red;      /* ⚠️ NOT DEFINED - debug */

	/* Lighter shades (double dash) */
	--secondary--100: red;      /* ⚠️ NOT DEFINED - debug */
	--secondary--200: red;      /* ⚠️ NOT DEFINED - debug */
	--secondary--300: #FCF9FD;  /* Your very light purple */

	/* Opacity variants - all use rgb(157, 80, 187) from #9D50BB */
	--secondary-rgba-0: rgba(157, 80, 187, 0);
	--secondary-rgba-3: rgba(157, 80, 187, 0.03);   /* Your 3% */
	--secondary-rgba-7: rgba(157, 80, 187, 0.07);   /* Your 7% */
	--secondary-rgba-10: rgba(157, 80, 187, 0.1);   /* Your 10% */
	--secondary-rgba-20: rgba(157, 80, 187, 0.2);   /* Your 20% */
	--secondary-rgba-30: rgba(157, 80, 187, 0.3);
	--secondary-rgba-40: rgba(157, 80, 187, 0.4);   /* Your 40% */
	--secondary-rgba-50: rgba(157, 80, 187, 0.5);
	--secondary-rgba-60: rgba(157, 80, 187, 0.6); 
	--secondary-rgba-70: rgba(157, 80, 187, 0.7); 
	--secondary-rgba-80: red;      /* ⚠️ NOT DEFINED - debug */
	--secondary-rgba-90: red;      /* ⚠️ NOT DEFINED - debug */

	/* Base and darker shades */
	--tertiary: #FF1493;
	--tertiary-100: orange;      /* ⚠️ NOT DEFINED - debug */
	--tertiary-200: orange;      /* ⚠️ NOT DEFINED - debug */
	--tertiary-300: orange;      /* ⚠️ NOT DEFINED - debug */

	/* Lighter shades (double dash) */
	--tertiary--100: orange;     /* ⚠️ NOT DEFINED - debug */
	--tertiary--200: orange;     /* ⚠️ NOT DEFINED - debug */
	--tertiary--300: #FFF8FB;    /* Your very light pink */

	/* Opacity variants - all use rgb(255, 20, 147) from #FF1493 */
	--tertiary-rgba-0: rgba(255, 20, 147, 0);
	--tertiary-rgba-3: rgba(255, 20, 147, 0.03);   /* Your 3% */
	--tertiary-rgba-: rgba(255, 20, 147, 0.05);   /* Your 3% */
	--tertiary-rgba-7: rgba(255, 20, 147, 0.07);   /* Your 7% */
	--tertiary-rgba-10: rgba(255, 20, 147, 0.1);   /* Your 10% */
	--tertiary-rgba-20: rgba(255, 20, 147, 0.2);   /* Your 20% */
	--tertiary-rgba-30: rgba(255, 20, 147, 0.3);   /* Your 30% */
	--tertiary-rgba-35: rgba(255, 20, 147, 0.35);   /* Yhome page hero gradient */
	--tertiary-rgba-40: rgba(255, 20, 147, 0.4);   /* Your 40% */
	--tertiary-rgba-50: rgba(255, 20, 147, 0.5);   /* Your 50% */
	--tertiary-rgba-60: rgba(255, 20, 147, 0.6);   /* Your 60% */
	--tertiary-rgba-70: orange;  /* ⚠️ NOT DEFINED - debug */
	--tertiary-rgba-80: orange;  /* ⚠️ NOT DEFINED - debug */
	--tertiary-rgba-90: orange;  /* ⚠️ NOT DEFINED - debug */

	/* Base and darker shades */
	--quaternary: #4169E1;
	--quaternary-100: springgreen;      /* ⚠️ NOT DEFINED - debug */
	--quaternary-200: springgreen;      /* ⚠️ NOT DEFINED - debug */
	--quaternary-300: springgreen;      /* ⚠️ NOT DEFINED - debug */

	/* Lighter shades (double dash) */
	--quaternary--100: springgreen;     /* ⚠️ NOT DEFINED - debug */
	--quaternary--200: springgreen;     /* ⚠️ NOT DEFINED - debug */
	--quaternary--300: #F9FAFE;         /* Your very light blue */

	/* Opacity variants - all use rgb(65, 105, 225) from #4169E1 */
	--quaternary-rgba-0: rgba(65, 105, 225, 0);
	--quaternary-rgba-3: rgba(65, 105, 225, 0.03);   /* Your 3% */
	--quaternary-rgba-7: rgba(65, 105, 225, 0.07);   /* Your 7% */
	--quaternary-rgba-10: rgba(65, 105, 225, 0.1);   /* Your 10% */
	--quaternary-rgba-20: rgba(65, 105, 225, 0.2);   /* Your 20% */
	--quaternary-rgba-30: springgreen;  /* ⚠️ NOT DEFINED - debug */
	--quaternary-rgba-40: rgba(65, 105, 225, 0.4);   /* Your 40% */
	--quaternary-rgba-50: springgreen;  /* ⚠️ NOT DEFINED - debug */
	--quaternary-rgba-60: springgreen;  /* ⚠️ NOT DEFINED - debug */
	--quaternary-rgba-70: springgreen;  /* ⚠️ NOT DEFINED - debug */
	--quaternary-rgba-80: springgreen;  /* ⚠️ NOT DEFINED - debug */
	--quaternary-rgba-90: springgreen;  /* ⚠️ NOT DEFINED - debug */

	/* Base and darker shades - using #223C60 as base */
	--dark: #223C60;
	--dark-100: #1F2937;
	--dark-200: #1F2937;  /* ⚠️ NOT DEFINED - debug color */
	--dark-300: #1F2937;  /* ⚠️ NOT DEFINED - debug color */

	/* Lighter shades (double dash) */
	--dark--100: #5B6D86;
	--dark--200: #7C8A9E;
	--dark--300: #ADB6C3;

	/* Opacity variants - use rgb(91, 109, 134) for gradients */
	--dark-rgba-0: rgba(91, 109, 134, 0);
	--dark-rgba-3: rgba(91, 109, 134, 0.03);  /* Your 3% */
	--dark-rgba-10: yellow;  /* ⚠️ NOT DEFINED - debug color */
	--dark-rgba-20: yellow;  /* ⚠️ NOT DEFINED - debug color */
	--dark-rgba-30: rgba(91, 109, 134, 0.3);
	--dark-rgba-40: yellow;  /* ⚠️ NOT DEFINED - debug color */
	--dark-rgba-50: rgba(91, 109, 134, 0.5);
	--dark-rgba-60: yellow;  /* ⚠️ NOT DEFINED - debug color */
	--dark-rgba-70: yellow;  /* ⚠️ NOT DEFINED - debug color */
	--dark-rgba-80: rgba(91, 109, 134, 0.8);
	--dark-rgba-90: yellow;  /* ⚠️ NOT DEFINED - debug color */
	
	/* oppacity of dark text - For dark interface shadows */	
	--dark-100-rgba-60: rgba(31, 41, 55, 0.6); 
	--dark-100-rgba-70: rgba(31, 41, 55, 0.7); 
	--dark-100-rgba-80: rgba(31, 41, 55, 0.8); 
/* White Color */
	--light: #FFF;
	--light-100: #f2f2f2;
	--light-200: #ececec;
	--light-300: #e6e6e6;
	--light--100: #ffffff;
	--light--200: #ffffff;
	--light--300: #ffffff;
	--light-rgba-0: rgba(255, 255, 255, 0);
	--light-rgba-10: rgba(255, 255, 255, 0.1);
	--light-rgba-20: rgba(255, 255, 255, 0.2);
	--light-rgba-30: rgba(255, 255, 255, 0.3);
	--light-rgba-40: rgba(255, 255, 255, 0.4);
	--light-rgba-50: rgba(255, 255, 255, 0.5);
	--light-rgba-60: rgba(255, 255, 255, 0.6);
	--light-rgba-70: rgba(255, 255, 255, 0.7);
	--light-rgba-80: rgba(255, 255, 255, 0.8);
	--light-rgba-90: rgba(255, 255, 255, 0.9);
}
/* Skin Colors - Inverse */
:root {
	--primary-inverse: #FFF;
	--secondary-inverse: #FFF;
	--tertiary-inverse: #FFF;
	--quaternary-inverse: #FFF;
	--dark-inverse: #FFF;
	--light-inverse: #5B6D86;;
}
/* Grey Colors */
:root {

	/* Base grey */
  --grey: #ADB6C3;  /* Your base */
  
  /* Lighter greys (100-500) */
  --grey-100: #FAFAFB;  /* Your lightest */
  --grey-200: cyan;     /* ⚠️ NOT DEFINED - debug */
  --grey-300: cyan;   /* ⚠️ NOT DEFINED - debug */
  --grey-400: #CED4DB;  /* Your light grey */
  --grey-500: cyan;   /* ⚠️ NOT DEFINED - debug */
  
  /* Darker greys (600-1000) */
  --grey-600: cyan;  /* ⚠️ NOT DEFINED - debug */
  --grey-700: cyan;  /* ⚠️ NOT DEFINED - debug */
  --grey-800: #7C8A9E;  /* Your darker grey */
  --grey-900: cyan;     /* ⚠️ NOT DEFINED - debug */
  --grey-1000: cyan;     /* ⚠️ NOT DEFINED - debug */
  /* grey box shadows (600-1000) */
  --grey-rgba-05: rgba(000, 000, 000, 0.05);

  --black: #000000 /* Full-Black */;
}

.gradient-text-color {
 display: inline-block;
  color: var(--quaternary--100);
  background: linear-gradient(91deg, var(--primary-rgba-20) 2.86%, var(--quaternary-rgba-20) 30.72%, var(--tertiary-rgba-20) 74.6%), linear-gradient(90deg, var(--primary) 5.89%, var(--quaternary) 23.98%, var(--secondary) 90.37%, var(--tertiary) 102.37%);
  background-image: linear-gradient(91deg, var(--primary-rgba-20) 2.86%, var(--quaternary-rgba-20) 30.72%, var(--tertiary-rgba-20) 74.6%), linear-gradient(90deg, var(--primary) 5.89%, var(--quaternary) 23.98%, var(--secondary) 90.37%, var(--tertiary) 102.37%);
}

.gradient-text-underline-pink {
 display: inline-block;
  color: var(--quaternary--100);
  background: linear-gradient(90deg, rgba(255, 20, 147, 0.20) 0%, rgba(255, 20, 147, 0.03) 62.98%);
}
/* Defined-Shadows */
:root {
  --primary-shadow-dual-highlight: 
    4px 0 12px 0 var(--grey-rgba-05), 
    0 6px 12px 0 var(--primary-rgba-20), 
    6px 0 16.6px 0 var(--tertiary-rgba-20), 
    -3px 3px 12px 0 var(--primary-rgba-20);

	--primary-shadow-blue-highlight: 
    1px 0 4.8px 0 rgba(0, 0, 0, 0.04), 
	-11px 4px 12px 0 var(--primary-rgba-5),
    0 6px 12px 0 var(--primary-rgba-20), 
    4px 0 12px 0 rgba(0, 0, 0, 0.10), 
    0 6px 12px 0 var(--primary-rgba-10);
	
	--gradient-pink: linear-gradient(90deg, rgba(255, 20, 147, 0.20) 0%, rgba(255, 20, 147, 0.03) 62.98%);

	--gradient-rainbow-background-image: linear-gradient(91deg, var(--primary-rgba-20) 2.86%, var(--quaternary-rgba-20) 30.72%, var(--tertiary-rgba-20) 74.6%), linear-gradient(90deg, var(--primary) 5.89%, var(--quaternary) 23.98%, var(--secondary) 90.37%, var(--tertiary) 102.37%);
	--gradient-rainbow-background: linear-gradient(91deg, var(--primary-rgba-20) 2.86%, var(--quaternary-rgba-20) 30.72%, var(--tertiary-rgba-20) 74.6%), linear-gradient(90deg, var(--primary) 5.89%, var(--quaternary) 23.98%, var(--secondary) 90.37%, var(--tertiary) 102.37%);
	--gradient-secondary-background:linear-gradient(180deg, var(--secondary-rgba-10) 0%, var(--secondary-rgba-60) 32%, var(--secondary-rgba-60) 57%, var(--secondary-rgba-10) 100%);
	--gradient-primary-glass-background:linear-gradient(180deg, var(--primary-rgba-0) 0%, var(--primary-rgba-15) 51%, var(--primary-rgba-20) 57%, var(--primary-rgba-30) 78%, var(--primary-rgba-0) 100%);

	/* Homepage Gradients */
	 --homepage-gradient: linear-gradient(0deg, var(--primary-rgba-35) 0%, var(--tertiary-rgba-35) 100%); /*Hero-Gradient */
	 --homepage-gradient-text: linear-gradient(0deg, var(--tertiary-rgba-35) 0%, var(--primary-rgba-35) 100%); /*Hero-Gradient */
	/* White Text Gradients */	
	 --white-text-top: 
	 linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1.0) 100%),
	linear-gradient(174deg,var(--primary-rgba-15) 0%, rgba(255, 255, 255, 0.100) 100%);

--text-gradient-background: linear-gradient(91deg, var(--primary-rgba-20) 2.86%, var(--quaternary-rgba-20) 30.72%, var(--tertiary-rgba-20) 74.6%), linear-gradient(90deg, var(--primary) 5.89%, var(--quaternary) 23.98%, var(--secondary) 90.37%, var(--tertiary) 102.37%);
--text-gradient-backgorund-image: linear-gradient(91deg, var(--primary-rgba-20) 2.86%, var(--quaternary-rgba-20) 30.72%, var(--tertiary-rgba-20) 74.6%), linear-gradient(90deg, var(--primary) 5.89%, var(--quaternary) 23.98%, var(--secondary) 90.37%, var(--tertiary) 102.37%); 
}