From a1a6637577656f7999aeb8c2c2d7dff58f7a0c74 Mon Sep 17 00:00:00 2001
From: Chris <thinker@homezero.cc>
Date: Sun, 1 Nov 2026 00:25:57 -0400
Subject: [PATCH] Apply Midnight Gastro-Bar theme with Savory Olive accent

---
 public/style.css | 72 ++++++++++++++++++++++++++++--------------------
 1 file changed, 42 insertions(+), 30 deletions(-)

diff --git a/public/style.css b/public/style.css
index 63f8427..ad85c4f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -18,51 +18,63 @@
   --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.2);
 
-  /* HSL Colors (Orange/Amber Culinary Theme) */
-  --hue-primary: 28;
-  --hue-secondary: 14;
-  --hue-neutral: 215;
+  /* HSL Colors (Midnight Gastro-Bar with Savory Olive & Golden Yolk) */
+  --hue-primary: 14;     /* Electric Blood Orange (#FF5722) */
+  --hue-secondary: 43;   /* Golden Yolk (#FFB703) */
+  --hue-neutral: 220;    /* Midnight Truffle & Slate Slate */
 
   /* Theme Dependent Variables (Defined for Light Theme first, toggled to Dark below) */
-  --primary: hsl(var(--hue-primary), 95%, 52%);
-  --primary-hover: hsl(var(--hue-primary), 95%, 44%);
-  --primary-glow: hsla(var(--hue-primary), 95%, 52%, 0.15);
+  --primary: hsl(var(--hue-primary), 88%, 50%);
+  --primary-hover: hsl(var(--hue-primary), 92%, 44%);
+  --primary-glow: hsla(var(--hue-primary), 100%, 57%, 0.16);
   
-  --secondary: hsl(var(--hue-secondary), 88%, 56%);
+  --secondary: hsl(var(--hue-secondary), 95%, 48%);
   
-  --accent: hsl(142, 70%, 45%); /* Cook mode green */
+  --accent: #588157; /* Savory Olive / Rosemary herb */
+  --accent-hover: #476a46;
+  --accent-glow: rgba(88, 129, 87, 0.22);
   --danger: hsl(0, 84%, 60%);
   --danger-hover: hsl(0, 84%, 50%);
   
-  --bg-app: hsl(var(--hue-neutral), 30%, 96%);
+  --bg-app: hsl(var(--hue-neutral), 20%, 97%);
   --bg-card: hsl(0, 0%, 100%);
-  --bg-nav: rgba(255, 255, 255, 0.8);
-  --border-color: hsl(var(--hue-neutral), 20%, 88%);
+  --bg-nav: rgba(255, 255, 255, 0.85);
+  --border-color: hsl(var(--hue-neutral), 15%, 88%);
   
-  --text-main: hsl(var(--hue-neutral), 40%, 16%);
-  --text-muted: hsl(var(--hue-neutral), 20%, 45%);
+  --text-main: hsl(var(--hue-neutral), 25%, 12%);
+  --text-muted: hsl(var(--hue-neutral), 15%, 45%);
   --text-white: #ffffff;
   
-  --glass-bg: rgba(255, 255, 255, 0.6);
-  --glass-border: rgba(255, 255, 255, 0.4);
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.5);
   --glass-blur: blur(12px);
 }
 
-/* Dark Theme Overrides */
+/* Dark Theme Overrides (Midnight Gastro-Bar) */
 .dark-theme,
 body.dark-theme {
-  --bg-app: hsl(var(--hue-neutral), 38%, 7%);
-  --bg-card: hsl(var(--hue-neutral), 30%, 11%);
-  --bg-nav: rgba(15, 23, 42, 0.8);
-  --border-color: hsl(var(--hue-neutral), 25%, 18%);
+  --primary: hsl(var(--hue-primary), 100%, 57%);
+  --primary-hover: hsl(var(--hue-primary), 100%, 50%);
+  --primary-glow: hsla(var(--hue-primary), 100%, 57%, 0.22);
+
+  --secondary: hsl(var(--hue-secondary), 100%, 51%);
+
+  --accent: #588157;
+  --accent-hover: #6a9b69;
+  --accent-glow: rgba(88, 129, 87, 0.3);
+
+  --bg-app: #0B0D11;
+  --bg-card: #151821;
+  --bg-nav: rgba(11, 13, 17, 0.85);
+  --border-color: rgba(255, 255, 255, 0.08);
   
-  --text-main: hsl(var(--hue-neutral), 15%, 92%);
-  --text-muted: hsl(var(--hue-neutral), 15%, 65%);
+  --text-main: #F3F4F6;
+  --text-muted: #94A3B8;
   
-  --glass-bg: rgba(15, 23, 42, 0.55);
-  --glass-border: rgba(255, 255, 255, 0.06);
-  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3);
-  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
+  --glass-bg: rgba(21, 24, 33, 0.65);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45);
+  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.65);
 }
 
 /* Base Resets */
@@ -141,13 +153,13 @@ h1, h2, h3, h4, h5, h6 {
 .btn-accent {
   background-color: var(--accent);
   color: var(--text-white);
-  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
+  box-shadow: 0 4px 14px var(--accent-glow);
 }
 
 .btn-accent:hover {
-  background-color: hsl(142, 70%, 38%);
+  background-color: var(--accent-hover);
   transform: translateY(-1px);
-  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
+  box-shadow: 0 6px 20px var(--accent-glow);
 }
 
 .btn-icon-round {