From ba2a46e62ae07af96b85ae582eba138e63ce9586 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Sat, 6 Sep 2025 02:44:31 +0000
Subject: [PATCH] Update web/static/css/theme-base.css

---
 web/static/css/theme-base.css | 89 +++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)

diff --git a/web/static/css/theme-base.css b/web/static/css/theme-base.css
index e69de29..23e51fa 100644
--- a/web/static/css/theme-base.css
+++ b/web/static/css/theme-base.css
@@ -0,0 +1,89 @@
+/* theme-base.css --------------------------------------------------------- */
+/* 1) Core tokens (names stay stable; theme files only change values) */
+:root {
+  --bg: #0b0f14;
+  --bg-elev: #121821;
+  --text: #e6edf3;
+  --muted: #9fb0c2;
+  --card: #0f141b;
+  --border: #223040;
+  --accent: #2f6cab;        /* links, primary buttons */
+  --accent-contrast: #ffffff;
+  --accent-soft: rgba(47,108,171,.14);
+  --success: #38b87c;
+  --warning: #e6ac3b;
+  --danger:  #e05d6f;
+  --shadow:  0 8px 24px rgba(0,0,0,.25);
+  --radius: 14px;
+}
+
+/* 2) Global page surfaces */
+html, body {
+  background: var(--bg);
+  color: var(--text);
+}
+body.themed-bg { background: var(--bg); } /* keeps your existing class working */
+
+/* 3) Cards / panels (the boxes your Search History & “Illustration of the Day” use) */
+.result-wrap .result-toolbar,
+.card, .panel, .box, .well, .modal-content {
+  background: var(--card);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+/* 4) Inputs */
+input[type="text"], input[type="search"], input[type="number"], select,
+textarea, .form-control {
+  background: var(--bg-elev);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+input::placeholder, textarea::placeholder { color: var(--muted); }
+
+/* 5) Pills/filters (your Subject / Scripture / Source chips) */
+.pill, .subject-pill, .badge, .tag {
+  background: var(--accent-soft);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+}
+.pill.is-active, .subject-pill.is-active { background: var(--accent); color: var(--accent-contrast); }
+
+/* 6) Buttons */
+.btn, .button {
+  background: var(--bg-elev);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+.btn-primary, .button.primary, .btn.btn-primary {
+  background: var(--accent);
+  color: var(--accent-contrast);
+  border-color: transparent;
+}
+.btn-secondary { background: var(--bg-elev); color: var(--text); }
+.btn:hover { filter: brightness(1.06); }
+
+/* 7) Links & focus */
+a { color: var(--accent); }
+a:hover { text-decoration: underline; }
+:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* 8) Tables (if any) */
+table { border-color: var(--border); }
+th, td { border-color: var(--border); }
+thead th { background: var(--bg-elev); }
+
+/* 9) Alerts / statuses */
+.alert-success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--text); }
+.alert-warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--text); }
+.alert-danger  { background: color-mix(in srgb, var(--danger)  16%, transparent); color: var(--text); }
+
+/* 10) Small utilities */
+.text-muted { color: var(--muted); }
+.border      { border: 1px solid var(--border); }
+.card-round  { border-radius: var(--radius); }
\ No newline at end of file