:root {
  --bg-color: #f6fafb;
  --text-color: #272a33;
  --text-color-desc: #848486;
  --container-bg: #ffffff;
  --input-bg: #f6fafb;
  --btn-bg: #7056ec;
  --btn-hover-bg: #5844bb;
  --btn-delete-bg: #e15555;
  --btn-delete-hover-bg: #c33c3c;
  --table-header-bg: #d9dffd;
  --table-body-bg: #ffffff;
  --table-border-color: #e9ecef;
  /* e9ecef  7056ec*/
  --infobox-bg: #fff9db;
  --infobox-border-color: #f1c40f;
  --infobox-info-bg: #eef6fc;
  --infobox-info-border-color: #3b82f6;
  --border-color: #cccccc;
  --gradient-color: linear-gradient(135deg, #7056ec, #a390f8);

  /* Achieved */
  --achieved-bg: #e0f7e9;
  --achieved-color: #2e7d32;
  --achieved-border: #a5d6a7;

  /* In Progress */
  --progress-bg: #fff8e1;
  --progress-color: #f57c00;
  --progress-border: #ffe082;

  /* Expired */
  --expired-bg: #ffebee;
  --expired-color: #c62828;
  --expired-border: #ef9a9a;

  --disable-btn: #ccc;

  /* --ewallet-bg: linear-gradient(
    310deg,
    rgba(112, 86, 236, 0.3) 0%,
    rgba(238, 246, 252, 0.8) 70%,
    rgba(255, 255, 255, 1) 100%
  ); */

  --ewallet-bg: linear-gradient(
    310deg,
    rgba(112, 86, 236, 0.05) 0%,
    rgba(255, 255, 255, 0.5) 100%
  );

  --tab-icon: #e2f0fa;
  --menu-bg: #ffff;

  --gradient-fade-right: linear-gradient(
    to right,
    #fff,
    rgba(255, 255, 255, 0)
  );
  --gradient-fade-left: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));

  /* donate banner */
  --donate-border-color: #ffe3e0;
  --donate-bg-gradient: linear-gradient(135deg, #fff6f5, #fff0ef, #ffe3e0),
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.6),
      transparent 70%
    );
}

body.dark-mode {
  --bg-color: #161618;
  --text-color: #ffffff;
  --text-color-desc: #b4b4b6;
  --container-bg: #1f1f21;
  --input-bg: #29282b;
  --btn-bg: #7056ec;
  --btn-hover-bg: #5844bb;
  --btn-delete-bg: #e15555;
  --btn-delete-hover-bg: #c33c3c;
  --table-header-bg: #232325;
  --table-body-bg: #1d1d1f;
  --table-border-color: #262528;
  --infobox-bg: #2c2a15;
  --infobox-border-color: #f1c40f;
  --infobox-info-bg: #1e2a36;
  --infobox-info-border-color: #60a5fa;
  --border-color: #444444;
  --gradient-color: linear-gradient(135deg, #5e4aa8, #3f2f91);

  /* Achieved - Soft Green */
  --achieved-bg: #2e3b31;
  --achieved-color: #b9e4c9;
  --achieved-border: #5a7d65;

  /* In Progress - Soft Amber */
  --progress-bg: #3b3526;
  --progress-color: #ffe8a3;
  --progress-border: #b39656;

  /* Expired - Soft Red */
  --expired-bg: #3f2b2b;
  --expired-color: #f5baba;
  --expired-border: #a35d5d;

  --disable-btn: #444;

  --ewallet-bg: linear-gradient(
    310deg,
    rgba(112, 86, 236, 0.25) 0%,
    rgba(40, 44, 52, 0.6) 70%,
    rgba(23, 26, 33, 0.9) 100%
  );

  --tab-icon: #223344;
  --menu-bg: #1e2a36;

  --gradient-fade-right: linear-gradient(
    to right,
    #1f1f21,
    rgba(31, 31, 33, 0)
  );
  --gradient-fade-left: linear-gradient(to left, #1f1f21, rgba(31, 31, 33, 0));

  /* donate banner */
  --donate-border-color: #4a2e2b;
  --donate-bg-gradient: linear-gradient(135deg, #2a1c1b, #311f1e, #4a2e2b),
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.08),
      transparent 70%
    );
}