:root {
  --background: #23242a;
  --background-secondary: rgba(25, 33, 41, 1);
  --text: #e3e3e3;
  --text-secondary: #8b949e;
  --text-rare: #7ee0ff;
  --text-legend: #ffa657;
  --text-mythic: #d2a8ff;
  --text-passion: #ff7b72;
  --text-order: #aff5b4;
  --text-void: #9457eb;
  --text-justice: #4da3ff;
  --text-instinct: #ffd700;
  --card: #121314;
  --card-secondary: #191a1b;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --border: rgba(255, 255, 255, 0.15);
  --overlay: rgba(60, 62, 66, .8);
  --navbar: rgba(25, 33, 41, 1);
  --shadow: drop-shadow(0 0 2px black);
  --home-card-body-color: rgba(33, 37, 41, .25);
  --button: #37393d;
  --hover: #2dd4bf;
  --link: oklch(82.3% .12 346.018);
}

html.theme-light {
  --background: #e4e6eb;
  --background-secondary: rgba(219, 220, 221, 4);
  --text: #1f1f1f;
  --text-secondary:#6a737d;
  --text-rare: #005cc5;
  --text-legend: #e36209;
  --text-mythic: #6f42c1;
  --text-passion: #d73a49;
  --text-order: #22863a;
  --text-void: #421fa1;
  --text-justice: #0052cc;
  --text-instinct: #c68a00;
  --card: #f8f8f8;
  --card-secondary: #f0f0f0;
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  --border: rgba(0, 0, 0, .175);
  --overlay: rgba(212, 212, 212, 0.65);
  --navbar: rgba(219, 220, 221, 4);
  --shadow: drop-shadow(0 0 2px white);
  --home-card-body-color: rgba(255, 255, 255, .25);
  --button: #e3e3e3;
  --hover: #0d9488;
  --link: oklch(52% 0.19 346.018);
}


/* --overlay: rgba(29, 38, 53, 0.72); */
/* --card: #222529;
--card-secondary: #2a2c31; */

/* --card: #ffffff;
--card-secondary: #f9f9f9; */