From d0b1ac0145b00051013890b8c39427d5b2f594ef Mon Sep 17 00:00:00 2001
From: LaurensBartelds <48316768+LaurensBartelds@users.noreply.github.com>
Date: Wed, 22 Apr 2026 22:32:11 +0200
Subject: [PATCH] fix: update font imports and adjust color variables for
 improved accessibility

---
 frontend/src/index.css | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index a488f0a..6fb105c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;1,9..144,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
 
 /* ============================================================
    Practice Exam — modern minimal design system
@@ -7,7 +7,7 @@
 :root {
   /* Type */
   --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
+  --font-serif: 'Lora', 'Iowan Old Style', Georgia, serif;
   --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
 
   /* Neutrals — warm-cool paper whites + charcoals */
@@ -52,15 +52,20 @@
   --ink: oklch(0.96 0.005 80);
   --ink-2: oklch(0.82 0.008 80);
   --ink-3: oklch(0.68 0.008 80);
-  --ink-4: oklch(0.52 0.008 80);
+  --ink-4: oklch(0.58 0.008 80);
   --line: oklch(0.3 0.012 260);
   --line-2: oklch(0.36 0.012 260);
   --line-3: oklch(0.44 0.012 260);
   --accent: oklch(0.72 0.13 265);
   --accent-weak: oklch(0.28 0.06 265);
   --accent-ink: oklch(0.85 0.12 265);
+  --correct: oklch(0.72 0.13 150);
   --correct-weak: oklch(0.28 0.06 150);
+  --wrong: oklch(0.72 0.18 25);
   --wrong-weak: oklch(0.28 0.06 25);
+  --warn: oklch(0.82 0.13 75);
+  --shadow-sm: 0 1px 0 oklch(1 0 0 / 0.06);
+  --shadow-md: 0 1px 2px oklch(0 0 0 / 0.2), 0 4px 16px oklch(0 0 0 / 0.3);
 }
 
 * { box-sizing: border-box; }
@@ -77,7 +82,7 @@ body {
   letter-spacing: -0.005em;
 }
 
-button { font-family: inherit; }
+button { font-family: inherit; color: inherit; }
 input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
 
 /* Utility */
@@ -210,7 +215,6 @@ input, textarea, select { font-family: inherit; font-size: inherit; color: inher
 .landing-title em {
   font-style: italic;
   color: var(--accent);
-  font-variation-settings: 'SOFT' 100;
 }
 .landing-sub {
   font-size: 17px;
@@ -233,6 +237,7 @@ input, textarea, select { font-family: inherit; font-size: inherit; color: inher
   padding: 40px 32px;
   text-align: center;
   background: var(--paper-2);
+  color: var(--ink);
   transition: all 150ms ease;
   cursor: pointer;
 }
@@ -578,6 +583,10 @@ input, textarea, select { font-family: inherit; font-size: inherit; color: inher
 .q-code .cm-number { color: oklch(0.55 0.14 40); }
 .q-code .cm-comment { color: var(--ink-4); font-style: italic; }
 .q-code .cm-fn { color: oklch(0.5 0.14 220); }
+[data-theme="dark"] .q-code .cm-keyword { color: oklch(0.78 0.16 280); }
+[data-theme="dark"] .q-code .cm-string { color: oklch(0.78 0.11 140); }
+[data-theme="dark"] .q-code .cm-number { color: oklch(0.80 0.14 50); }
+[data-theme="dark"] .q-code .cm-fn { color: oklch(0.78 0.13 220); }
 
 .q-table {
   width: 100%;
@@ -716,6 +725,7 @@ input, textarea, select { font-family: inherit; font-size: inherit; color: inher
   border: 1px solid var(--line-2);
   border-radius: var(--r-md);
   background: var(--paper);
+  color: var(--ink);
   cursor: pointer;
   transition: all 120ms ease;
   display: flex;
@@ -756,6 +766,7 @@ input, textarea, select { font-family: inherit; font-size: inherit; color: inher
   border: 1px solid var(--line-2);
   border-radius: var(--r-md);
   background: var(--paper);
+  color: var(--ink);
   cursor: grab;
   transition: all 120ms ease;
   font-size: 14.5px;