/* Colors */


/* -----------------------
   Root (Variable Definitions)
   ----------------------- */
:root {
    --bg-color: hsl(220, 30%, 15%);
    --modal-color: hsl(280, 30%, 15%);
    --text-color: hsl(0, 0%, 85%);
    --label-color: hsl(50, 70%, 70%);
    --primary-color: hsl(210, 15%, 28%);
    --accent-color: hsl(35, 90%, 50%);
    --secondary-color: hsl(210, 20%, 60%);
    --accent2-color: hsl(10, 70%, 60%);
    --mute-color:hsl(0,80%,45%);
    --dim-color:hsl(45,100%,50%);
    --solo-color:hsl(120, 70%, 40%);    

}



/* --- Social Icon Styling --- */

/* Style the list items containing social icons */
/* Adjust margin/padding if needed to match other menu items or create space between icons */
.nav-menu li .social-icon-link {
   display: inline-block; /* Or block, depending on your nav-menu's main display (flex/grid) */
   padding: 0 8px; /* Adjust this padding to control space between icons */
   /* Ensure text-decoration, color are reset if inherited differently */
   text-decoration: none;
   color: inherit; /* Icons don't have text color, but good practice */
}

/* Style the icon image itself */
.nav-menu li .social-icon-img {
   display: block; /* Makes width and height behave predictably */
   width: 36px;   /* Set the desired size for your icons */
   height: 36px;  /* Set the desired size for your icons (should match width for square icons) */
   align-items: stretch; /* Helps align if the link is inline-flex/block */
   max-width: 100%; /* Prevent image from overflowing its container */
   height: auto;  /* Maintain aspect ratio if width is set */
}

/* Optional: Add a subtle hover effect */
.nav-menu li .social-icon-link:hover .social-icon-img {
   opacity: 0.8; /* Slightly dim the icon on hover */
   transition: opacity 0.2s ease-in-out; /* Smooth transition */
}

/* For responsive design, you might want to adjust icon size on smaller screens */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
   .nav-menu li .social-icon-link {
        padding: 0 10px; /* Slightly less padding on smaller screens */
   }

   .nav-menu li .social-icon-img {
       width: 27px; /* Smaller icons on mobile */
       height: 27px;
   }
}



/* -----------------------
  Original Palette
   ----------------------- */
/* --bg-color: hsl(210, 35%, 75%);
   --modal-color:hsl(257, 35%, 75%);
   --text-color: hsl(214, 39%, 20%);
   --label-color: hsl(50,50%,80%);
   --primary-color: hsl(210, 12%, 40%);
   --secondary-color: hsl(270, 12%, 40%);
   --accent3-color: hsl(41, 60%, 53%);
   --accent-color: hsl(32, 98%, 43%);

   ----------------
Aqua Palette
    --bg-color: hsl(180, 50%, 70%);  Light Aqua 
    --modal-color:hsl(240, 50%, 70%);  Light Periwinkle 
    --text-color: hsl(210, 40%, 20%);  Dark Blue 
    --label-color: hsl(90, 60%, 85%); Pale Mint 
    --primary-color: hsl(180, 20%, 40%);
    --secondary-color: hsl(270, 20%, 40%); Cool Lavender 
    --accent-color: hsl(10, 70%, 60%);  Soft Salmon 
    --accent2-color: hsl(340, 80%, 55%);  Dusty Rose 


/* Header and Navbar */