/*LIGHT THEME SYSTEM*/
@media (prefers-color-scheme: light) {

  :root {
    --bg: #ffffff;
    --color: #000000;
  --notif-bg-unread: #e6f7ff;
  --notif-bg-read: #fff;
  --notif-text: #000;
  --notif-border: #ddd;
  --header-bg: rgba(240, 240, 240, 0.8);
  --mainContent-bg: #f7f7f7;

  --navBtn-bg: #f0f0f0;
  --active: #e6e6e6;

  --link: #0366d6;

  --card-bg: #ffffff;
  --border: #dcdcdc;

  --form-bg: #ffffff;
  --input-bg: #f2f2f2;
  --input-color: #000000;
  --text-muted: #545454;

  --chevron-color: #555555;
  
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  
}
}


/*MANUALLY SELECTED LIGHT THEME*/
:root[data-theme="light"] {
    --bg: #ffffff;
    --color: #000000;
  --text-muted: #545454;
  --notif-bg-unread: #e6f7ff;
  --notif-bg-read: #fff;
  --notif-text: #000;
  --notif-border: #ddd;
  --header-bg: rgba(240, 240, 240, 0.8);
  --mainContent-bg: #f7f7f7;

  --navBtn-bg: #f0f0f0;
  --active: #b1aeae;
  background-color: #e6f7ff; /* light blue for unread */
  font-weight: 600;  
  --link: #0366d6;

  --card-bg: #ffffff;
  --border: #dcdcdc;
--success: #006239;

  --form-bg: #ffffff;
  --input-bg: #f2f2f2;
  --input-color: #000000;

  --chevron-color: #555555;
  
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/*MANUALLY SELECTED DARK THEME*/
:root[data-theme="dark"] {
  --bg: #000;
  --color: #fff;
  --header-bg: rgba(128, 128, 128, 0.258);
  --mainContent-bg: #1f1e1e;
  --navBtn-bg: #222;
  --notif-bg-unread: #1e3a5f;   /* dark blue for unread */
  --notif-bg-read: #2c2c2c;     /* dark background for read */
  --notif-text: #eee;
  --notif-border: #444;
  --link: #0393d6;
  --card-bg: #111;
  --border: #333;
  --form-bg: #111;
  --input-bg: #1c1c1c;
  --input-color: #ffffff;
--chevron-color: #c5c5c5;
  
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}