fix: dark mode support — replace hardcoded white/light colours with CSS variables

Safari on macOS/iOS applies system dark mode to Gradio, while custom CSS
was hardcoding 'background: white' and light hex colours causing white
islands on dark backgrounds.

Changes:
- Add color-scheme: light to :root (prevents browser auto-inversion of inputs)
- Add @media (prefers-color-scheme: dark) block with adapted brand variables
- Replace all hardcoded 'white', '#334155', '#64748b' etc with --wcc-surface,
--wcc-text, --wcc-text-muted variables that resolve correctly in both modes
- Chatbot, topic buttons, footer, input box, clear button all use variables

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.py

@@ -352,6 +352,7 @@ def inject_question(question: str, history: list[ChatMessage]):
 WCC_CSS = """
 /* ── Worcestershire Libraries brand colours ── */
 :root {
+    color-scheme: light;          /* prevent Safari/Firefox dark-mode inversion */
     --wcc-navy:       #1e3a5f;
     --wcc-blue:       #1d4ed8;
     --wcc-blue-light: #dbeafe;
@@ -360,10 +361,28 @@ WCC_CSS = """
     --wcc-green:      #166534;
     --wcc-bg:         #f8fafc;
     --wcc-border:     #e2e8f0;
+    --wcc-surface:    #ffffff;
+    --wcc-text:       #334155;
+    --wcc-text-muted: #64748b;
+}
+
+/* Dark mode — keep brand integrity while respecting user preference */
+@media (prefers-color-scheme: dark) {
+    :root {
+        color-scheme: dark;
+        --wcc-bg:         #0f172a;
+        --wcc-border:     #334155;
+        --wcc-surface:    #1e293b;
+        --wcc-text:       #cbd5e1;
+        --wcc-text-muted: #94a3b8;
+        --wcc-blue-light: #1e3a5f;
+        --wcc-gold-light: #1c1405;
+        --wcc-blue:       #60a5fa;
+    }
 }
 
 /* ── Page background ── */
-.gradio-container { background: var(--wcc-bg) !important; }
+.gradio-container { background: var(--wcc-bg) !important; color: var(--wcc-text) !important; }
 
 /* ── Header ── */
 #wcc-header {
@@ -420,20 +439,20 @@ WCC_CSS = """
 /* ── Topic navigator ── */
 #topic-nav-label {
     font-size: 0.78rem;
-    color: #94a3b8;
+    color: var(--wcc-text-muted);
     margin: 0 0 6px 2px;
     letter-spacing: 0.02em;
     text-transform: uppercase;
 }
 .topic-q button {
-    background: white !important;
+    background: var(--wcc-surface) !important;
     border: 1px solid var(--wcc-border) !important;
     border-radius: 8px !important;
     text-align: left !important;
     padding: 9px 14px !important;
     font-size: 0.88rem !important;
     line-height: 1.4 !important;
-    color: #334155 !important;
+    color: var(--wcc-text) !important;
     transition: background 0.12s ease, border-color 0.12s ease, padding-left 0.12s ease !important;
     margin-bottom: 4px !important;
     width: 100% !important;
@@ -462,10 +481,10 @@ WCC_CSS = """
 #wcc-chatbot {
     border: 1px solid var(--wcc-border) !important;
     border-radius: 12px !important;
-    background: white !important;
+    background: var(--wcc-surface) !important;
     min-height: 460px;
 }
-#wcc-chatbot .message.bot { background: #eff6ff !important; }
+#wcc-chatbot .message.bot { background: var(--wcc-blue-light) !important; }
 #wcc-chatbot .message.user { background: var(--wcc-blue-light) !important; }
 
 /* ── Input area ── */
@@ -473,6 +492,8 @@ WCC_CSS = """
     border-radius: 10px !important;
     border: 1.5px solid var(--wcc-border) !important;
     font-size: 0.95rem !important;
+    background: var(--wcc-surface) !important;
+    color: var(--wcc-text) !important;
 }
 #msg-input textarea:focus {
     border-color: var(--wcc-blue) !important;
@@ -486,7 +507,7 @@ WCC_CSS = """
 }
 #clear-btn button {
     border-radius: 10px !important;
-    color: #64748b !important;
+    color: var(--wcc-text-muted) !important;
 }
 
 /* ── Right panel ── */
@@ -508,12 +529,12 @@ WCC_CSS = """
 
 /* ── Footer ── */
 #wcc-footer {
-    background: white;
+    background: var(--wcc-surface);
     border: 1px solid var(--wcc-border);
     border-radius: 10px;
     padding: 10px 18px;
     font-size: 0.78rem;
-    color: #64748b;
+    color: var(--wcc-text-muted);
     margin-top: 8px;
     text-align: center;
 }