:root {
  --bg-color: #f4f1ea;
  --text-color: #1c1917;
  --accent-color: #2563eb;
  --selection-color: #00e5ff;
  --quote-bg: #f5f5f4;
  --quote-border: #d6d3d1;
  --meta-color: #78716c;
  --max-width: 80ch;
  --cyan: #11cfb6;
  --magenta: #ff00ff;
  --yellow: #fff200;
  --purple: #6c2cff;
  --electric-blue: #2563eb;
  --night: #0f172a;
  --white: #ffffff;
  --title-txt: rgba(52, 55, 236, 0.753);
  --card-text: var(--text-color);
  --link-color: #ffffff;
  --section-bg: rgba(255, 255, 255, 0.384);
  --grid-color: rgba(37, 99, 235, 0.08);
  --link-hover: white;
  --toggle-hover: var(--accent-color);
  --box-shadow: var(--accent-color);
  --border-color: magenta;
  --pname-bg: #00dbff66;
  --pname-shadow: rgba(35, 33, 133, 0.863);
  --pname-color: rgba(189, 51, 182, 0.24);
}

[data-theme="dark"] {
  --bg-color: #293144;
  --text-color: #d7dce5;
  --pname-color: #ffffff;
  --accent-color: #8c96a8;
  --selection-color: #00e5ff;
  --quote-bg: #f5f5f4;
  --quote-border: #d8dde8;
  --meta-color: #78716c;
  --card-text: var(--text-color);
  --link-color: yellow;
  --title-txt: #ffffff;
  --section-bg: rgba(39, 34, 34, 0.384);
  --grid-color: rgba(80, 130, 255, 0.13);
  --link-hover: cyan;
  --pname-bg: rgba(0, 255, 255, 0.11);
  --pname-color: #f5f5f5;
  --pname-shadow: navy;
}