:root {
  --background-color: #fff;
  --primary-foreground-color: #4a4a4a;
  --secondary-foreground-color: #000;
  --primary-subtle-color: #04aeee;
  --secondary-subtle-color: #f4f8fd;
  --titles-color: #333;
  --link-color: #293951;
  --primary-border-color: #9b9b9b;
  --secondary-border-color: aliceblue;
  --article-shadow-normal: 0 10px 10px rgba(0,0,0,0.08);
  --article-shadow-hover: 0 4px 60px 0 rgba(0,0,0,0.2);
  --transparent-background-color: rgba(255,255,255,0.99);
  --footer-background-color: #293951;
  --submenu-shadow-color-opacity: 0.25;
  --button-shadow-color-normal: rgba(108, 108, 108, 0.2);
  --button-shadow-color-hover: rgba(108, 108, 108, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #111;
    --primary-foreground-color: #ccc;
    --secondary-foreground-color: #fff;
    --primary-subtle-color: #2c2fe6;
    --secondary-subtle-color: #141920;
    --titles-color: #b4b4b4;
    --link-color: #2c2fe6;
    --primary-border-color: #1d1d1d;
    --secondary-border-color: #0f0f0f;
    --article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);
    --article-shadow-hover: 0 4px 5px 10px rgba(0,0,0,0.1);
    --transparent-background-color: rgba(0,0,0,0.99);
    --footer-background-color: #080808;
    --submenu-shadow-color-opacity: 0.55;
    --button-shadow-color-normal: rgba(10, 10, 10, 0.5);
    --button-shadow-color-hover: rgba(10, 10, 10, 0.5);
  }
}