:root {
  --bg-primary: #23242a;
  --bg-secondary: rgba(25, 33, 41, 1);

  --text-primary: #ffffff;
  --text-secondary: rgba(156, 163, 175, 1);

  --bg-card-primary: #222529;
  --bg-card-secondary: #2a2c31;

  --border-color: rgba(255, 255, 255, 0.15);

  --overlay: rgba(29, 38, 53, 0.72);

  --color-navbar: rgba(25, 33, 41, 1);

  --shadow: drop-shadow(0 0 2px black);

  --home-card-body-color: rgba(33, 37, 41, .25);
}

html.theme-light {
  --bg-primary: #ffffff;
  --bg-secondary: rgba(219, 220, 221, 4);

  --text-primary: #000000;
  --text-secondary:rgba(156, 163, 175, 1);

  --bg-card-primary: #ffffff;
  --bg-card-secondary: #f9f9f9;

  --border-color: rgba(0, 0, 0, .175);

  --overlay: rgba(212, 212, 212, 0.65);

  --color-navbar: rgba(219, 220, 221, 4);

  --shadow: drop-shadow(0 0 2px white);

  --home-card-body-color: rgba(255, 255, 255, .25);
}