/* ===== CSS COLOR VARIABLES ===== */
:root {
  /*----------------------------------- Background Colors --------------------------------- */

  --bg-neutral: #f5f5f5; /*page bg-color  */

  --bg-white: #ffffff; /*Navbar bg-color, form bg-color, Table outside section bg-color*/

  --bg-primary: #c2185b; /* 
                            sidebar color :- list-active, list-hover ; 
                            Navbar :- Profile logo; 
                            Form:- All input fields focus border, image upload box dotted border;
                            Table :- Header(thead)  
                            login page 
                            */

  --bg-dark: #a01548; /* sidebar color  and login btn*/

  --bg-darker: #a84368; /* dropdown sidebar color  */

  --bg-secondary: #b12b5c; /* edit btn color  */

  --bg-cards: #ee6496; /* Dashbord top cards icon bg-color  */

  --bg-light: #f0f8e9; /* In logo page logo preview top box bg-color  */

  --bg-black: #000000; /* Not used anywhere  */

  --toggle-btn: #9c2350; /* Not used anywhere  */

  /*----------------------------------- Text Colors ------------------------------------------ */

  --text-primary: #8b0838; /* All main heading and reset btn text color  */

  --text-white: #ffffff;

  --text-black: #000000;

  --text-muted: #90a4ae;

  /* --------------------------- Derived Colors (for opacity) -------------------------------- */

  --bg-primary-light: rgba(125, 58, 46, 0.1);

  --bg-secondary-light: rgba(185, 187, 102, 0.1);

  --bg-accent-light: rgba(247, 168, 93, 0.1);

  --bg-white-transparent: rgba(255, 255, 255, 0.95);

  --bg-black-transparent: rgba(0, 0, 0, 0.8);
}