From 2b7fc6b0168746d6f3be05c715a6f49a12ae173c Mon Sep 17 00:00:00 2001
From: kyle <t72chevy@hotmail.com>
Date: Sun, 15 Feb 2026 19:48:19 +0100
Subject: [PATCH] refactor: consolidate hardcoded colors into CSS custom
 properties

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 public/css/components.css | 20 ++++----------------
 public/css/main.css       | 17 +++++++++++++----
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/public/css/components.css b/public/css/components.css
index 7c8435b..09c0aa0 100644
--- a/public/css/components.css
+++ b/public/css/components.css
@@ -350,7 +350,7 @@ body.dark-mode .site-search-result div:first-child {
 }
 
 body.dark-mode .site-search-result div:last-child {
-    color: var(--color-text-muted-dark);
+    color: var(--color-text-secondary);
 }
 
 #search-site-button {
@@ -858,7 +858,7 @@ body.landscape .countdown-large.soon {
 }
 
 body.dark-mode .time-range {
-    color: var(--color-text-muted-dark);
+    color: var(--color-text-secondary);
 }
 
 /* Next departures (replaces time-range) */
@@ -1160,7 +1160,7 @@ body.landscape #compact-weather-bar {
     align-items: center;
     justify-content: center;
     gap: 16px;
-    background: rgba(0, 0, 0, 0.5);
+    background: var(--color-bar-bg);
     color: #ddd;
     padding: 6px 20px;
     border-radius: 4px;
@@ -1233,7 +1233,7 @@ body.landscape #news-ticker {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: #191970;
+    background-color: var(--color-daylight-night);
     background-image: var(--daylight-gradient, none);
 }
 
@@ -1470,18 +1470,6 @@ body.dark-mode .config-search-input:focus-visible {
     color: #ccc;
 }
 
-.site-search-result div:last-child {
-    color: #777;
-}
-
-body.dark-mode .site-search-result div:last-child {
-    color: #bbb;
-}
-
-body.dark-mode .time-range {
-    color: #bbb;
-}
-
 /* ========================================
    Responsive Design - Departure cards
    ======================================== */
diff --git a/public/css/main.css b/public/css/main.css
index a188ae0..14bf1cc 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -36,6 +36,15 @@
     --ticker-bg: rgba(0, 0, 0, 0.85);
     --font-primary: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     --font-numbers: 'Segoe UI', 'Roboto Mono', 'SF Mono', 'Consolas', monospace;
+    --color-bg-kiosk: #1a1a2e;
+    --color-surface-kiosk: rgba(255, 255, 255, 0.08);
+    --color-surface-kiosk-hover: rgba(255, 255, 255, 0.12);
+    --color-text-secondary: #bbb;
+    --color-text-tertiary: #888;
+    --color-bar-bg: rgba(0, 0, 0, 0.5);
+    --color-daylight-night: #191970;
+    --color-daylight-dawn: #FF6B35;
+    --color-daylight-day: #FFEB3B;
 }
 
 /* ========================================
@@ -152,7 +161,7 @@ body.normal .departure-container {
 body.landscape {
     max-width: 100%;
     padding: 10px 20px 0 20px;
-    background-color: #1a1a2e;
+    background-color: var(--color-bg-kiosk);
     color: var(--color-text-light);
 }
 
@@ -214,7 +223,7 @@ body.landscape .weather-container {
 
 body.landscape .departure-card {
     min-height: 65px;
-    background-color: rgba(255, 255, 255, 0.08);
+    background-color: var(--color-surface-kiosk);
     border: 1px solid rgba(255, 255, 255, 0.06);
 }
 
@@ -258,7 +267,7 @@ body.landscape .countdown-large {
 
 body.landscape .time-range,
 body.landscape .next-departures {
-    color: #bbb;
+    color: var(--color-text-secondary);
 }
 
 /* Tighter card spacing in landscape */
@@ -284,7 +293,7 @@ body.landscape .times-container {
 
 body.landscape .next-departures {
     font-size: 0.7em;
-    color: #bbb;
+    color: var(--color-text-secondary);
     white-space: nowrap;
     letter-spacing: 0.5px;
 }