feat: --accent-contrast-color was added

assets/css/buttons.scss

@@ -18,7 +18,7 @@ a.button {
   border-radius: 8;
   border: 1px solid var(--accent);
   background: var(--accent);
-  color: var(--background);
+  color: var(--accent-contrast-color);
   font: inherit;
   font-weight: bold;
   appearance: none;

assets/css/logo.scss

@@ -3,6 +3,6 @@
   align-items: center;
   text-decoration: none;
   background: var(--accent);
-  color: black;
+  color: color-mix(in srgb, var(--accent), var(--accent-contrast-color) 90%);;
   padding: 5px 10px;
 }

assets/css/main.scss

@@ -110,7 +110,7 @@ figure {
     padding: 5px 10px;
     margin-top: 5px;
     background: var(--accent);
-    color: var(--background);
+    color: var(--accent-contrast-color);
     /* opacity: .8; */
 
     &.left {
@@ -291,7 +291,7 @@ ol {
 
 mark {
   background: var(--accent);
-  color: var(--background);
+  color: var(--accent-contrast-color);
 }
 
 .container {

assets/css/variables.scss

@@ -1,6 +1,7 @@
 :root {
   /* COLOR VARIABLES */
   --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%);
+  --accent-contrast-color: black;
   --color: white;
   --border-color: rgba(255, 255, 255, .1);