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

  :root {
--bg-primary: #eddddd;
    --bg-secondary: #d4d4d4;
    --text-primary: #000000;
    --text-secondary: #414141;

    --active-color: #358cff;

    --hover-bg: #d9d9d9;

    --surface-primary: #e8eaeb;
--surface-secondary: #E7EAED;

--border-primary: #c7c7c7;
--border-secondary: #b4b4b4;
--border: var(--border-primary);

  --muted: #5f5d5d;
  --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;
  background-color: #e6f7ff; /* light blue for unread */

  --card-bg: #ffffff;
--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 LIGHT THEME*/
:root[data-theme="light"] {
    --bg-primary: #eddddd;
    --bg-secondary: #d4d4d4;
    --text-primary: #000000;
    --text-secondary: #414141;

    --active-color: #358cff;

    --hover-bg: #d9d9d9;

    --surface-primary: #e8eaeb;
--surface-secondary: #E7EAED;

--border-primary: #c7c7c7;
--border-secondary: #b4b4b4;
--border: var(--border-primary);

  --muted: #5f5d5d;
  --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;
  background-color: #e6f7ff; /* light blue for unread */

  --card-bg: #ffffff;
--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-primary: #000;
  --text-primary: #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;
  --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);
}