:root {
    /*1. Green*/
     /*--primary-color: #5a9e7c;
  --primary-color-rgb: 90, 158, 124;
  --secondary-color: #83cc61;
  --secondary-color-rgb: 131, 204, 97;
  --tertiary-color: #e1ffd4;
  --tertiary-color-rgb: 225, 255, 212;
  --quaternary-color: #b7e576;
  --quaternary-color-rgb: 183, 229, 118;*/
    /* 2. Primary Blue */
    /*--primary-color: #1e6bff;
    --primary-color-rgb: 30, 107, 255;*/
    /* Darker Blue*/ 
    /*--secondary-color: #0f3d91;
    --secondary-color-rgb: 15, 61, 145;*/
/*     Light Blue 
*/    /*--tertiary-color: #4da3ff;*/
     /*Accent Blue */
    /*--quaternary-color: #00b3ff;*/
    /* Optional second blue tone */
    /*--primary-color-2-rgb: 0, 179, 255;*/
    /* 3. MAIN BRAND BLUE */
    /*--primary-color: #00B7DE;
    --primary-color-rgb: 0, 183, 222;*/
/*     Darker Shade (hover, active states) 
*/    /*--secondary-color: #008EAD;
    --secondary-color-rgb: 0, 142, 173;*/
/*     Light Blue (soft backgrounds) 
*/    /*--tertiary-color: #33C9E6;*/
/*     Very Light Accent 
*/    /*--quaternary-color: #B3ECF7;*/
/*     Used in overlay gradients 
*/    /*--primary-color-2-rgb: 0, 142, 173;*/
    /*4. Teal Primary (blue + green mix) */
    /*--primary-color: #00AFA3;*/  /*balanced teal*/ 
    /*--primary-color-rgb: 0, 175, 163;*/
    /* Deeper Teal (for hover / strong contrast) */
    /*--secondary-color: #007C88;
    --secondary-color-rgb: 0, 124, 136;*/
    /* Lighter Aqua */
    /*--tertiary-color: #33CFC5;*/
    /* Very Soft Mint Background */
    /*--quaternary-color: #E6F7F6;*/
    /* Gradient helper */
    /*--primary-color-2-rgb: 0, 150, 170;*/

    /*5. Light Aqua-Blue (main brand color) */
    --primary-color: #27C2E3;
    --primary-color-rgb: 39, 194, 227;
    /* Slightly Deeper Blue-Teal (hover / active) */
    --secondary-color: #159FBD;
    --secondary-color-rgb: 21, 159, 189;
    /* Soft Highlight */
    --tertiary-color: #6FD7EC;
    /* Very Light Background Tint */
    --quaternary-color: #EAF9FD;
    /* Gradient support */
    --primary-color-2-rgb: 0, 155, 190;
}