style: rewrite style.css with Doot dark glass design tokens

1 files changed, 75 insertions, 43 deletions

diff --git a/web/style.css b/web/style.css
index 83c88e3..e9e797d 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 /* Design tokens */
 :root {
   --state-pending:          #94a3b8;
@@ -11,12 +13,12 @@
   --state-blocked:          #818cf8;
   --state-ready:            #34d399;
 
-  --bg:             #0f172a;
-  --surface:        #1e293b;
-  --surface-1:      #243044;
-  --surface-hover:  #263350;
-  --border:         #334155;
-  --border-light:   #3d506a;
+  --bg:             #080f1a;
+  --surface:        rgba(15, 23, 42, 0.80);
+  --surface-1:      rgba(22, 33, 62, 0.85);
+  --surface-hover:  rgba(30, 44, 80, 0.90);
+  --border:         rgba(255, 255, 255, 0.08);
+  --border-light:   rgba(255, 255, 255, 0.12);
   --text:           #e2e8f0;
   --text-muted:     #94a3b8;
   --accent:         #38bdf8;
@@ -27,16 +29,19 @@
   --danger:      #f87171;
 
   /* Component aliases */
-  --bg-card:     #1a2640;
-  --card-bg:     #1a2640;
-  --bg-elevated: #243044;
-  --bg-hover:    #2d3f5a;
-  --code-bg:     #111c2d;
+  --bg-card:     rgba(15, 23, 42, 0.80);
+  --card-bg:     rgba(15, 23, 42, 0.80);
+  --bg-elevated: rgba(22, 33, 62, 0.85);
+  --bg-hover:    rgba(30, 44, 80, 0.90);
+  --code-bg:     rgba(8, 15, 26, 0.90);
   --font-mono:   ui-monospace, "Cascadia Code", "Fira Code", monospace;
+  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
 
   /* Glass-morphism */
-  --glass-bg:     rgba(30, 41, 59, 0.75);
-  --glass-blur:   12px;
+  --glass-bg:      rgba(15, 23, 42, 0.72);
+  --glass-blur:    12px;
+  --glass-border:  rgba(255, 255, 255, 0.05);
+  --glass-shadow:  0 8px 32px rgba(0, 0, 0, 0.45);
 }
 
 /* Reset */
@@ -47,7 +52,7 @@
 }
 
 body {
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family: var(--font-sans);
   background: var(--bg);
   color: var(--text);
   min-height: 100dvh;
@@ -58,7 +63,7 @@ header {
   background: var(--glass-bg);
   backdrop-filter: blur(var(--glass-blur));
   -webkit-backdrop-filter: blur(var(--glass-blur));
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--glass-border);
   padding: 1rem;
   position: sticky;
   top: 0;
@@ -86,8 +91,8 @@ header h1 {
 }
 
 .agent-selector {
-  background: var(--bg);
-  border: 1px solid var(--border);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 0.375rem;
   color: var(--text);
   padding: 0.4em 0.6em;
@@ -105,7 +110,7 @@ header h1 {
   background: var(--glass-bg);
   backdrop-filter: blur(var(--glass-blur));
   -webkit-backdrop-filter: blur(var(--glass-blur));
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--glass-border);
   display: flex;
   gap: 0;
   padding: 0;
@@ -232,13 +237,16 @@ main {
 
 /* Task card */
 .task-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
   border-radius: 0.5rem;
   padding: 0.875rem 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
+  box-shadow: var(--glass-shadow);
 }
 
 .task-card-header {
@@ -475,7 +483,7 @@ main {
   padding: 0.3em 0.6em;
   border-radius: 0.375rem;
   border: 1px solid var(--border);
-  background: var(--bg);
+  background: var(--glass-bg);
   color: var(--text);
 }
 
@@ -576,11 +584,12 @@ dialog {
   backdrop-filter: blur(var(--glass-blur));
   -webkit-backdrop-filter: blur(var(--glass-blur));
   color: var(--text);
-  border: 1px solid var(--border);
+  border: 1px solid var(--glass-border);
   border-radius: 8px;
   padding: 1.5rem;
   max-width: 480px;
   width: 100%;
+  box-shadow: var(--glass-shadow);
 }
 
 dialog::backdrop {
@@ -609,7 +618,7 @@ dialog label select {
   display: block;
   width: 100%;
   margin-top: 4px;
-  background: var(--bg);
+  background: rgba(8, 15, 26, 0.70);
   border: 1px solid var(--border);
   border-radius: 0.375rem;
   color: var(--text);
@@ -673,7 +682,8 @@ dialog label select:focus {
   background: var(--glass-bg);
   backdrop-filter: blur(var(--glass-blur));
   -webkit-backdrop-filter: blur(var(--glass-blur));
-  border-left: 1px solid var(--border);
+  border-left: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
   z-index: 30;
   display: flex;
   flex-direction: column;
@@ -789,7 +799,7 @@ dialog label select:focus {
 }
 
 .panel-code {
-  background: var(--bg);
+  background: var(--code-bg);
   border: 1px solid var(--border);
   border-radius: 0.375rem;
   padding: 0.625rem 0.75rem;
@@ -843,8 +853,10 @@ dialog label select:focus {
 }
 
 .execution-row {
-  background: var(--bg);
-  border: 1px solid var(--border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
   border-radius: 0.375rem;
   padding: 0.625rem 0.75rem;
   display: flex;
@@ -977,7 +989,9 @@ dialog label select:focus {
 .question-banner {
   margin-top: 0.75rem;
   padding: 0.75rem;
-  background: var(--surface);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
   border: 1px solid var(--warn);
   border-radius: 0.5rem;
 }
@@ -1004,7 +1018,7 @@ dialog label select:focus {
   padding: 0.375rem 0.75rem;
   border: 1px solid var(--border);
   border-radius: 0.375rem;
-  background: var(--surface-1);
+  background: var(--glass-bg);
   color: var(--text);
   cursor: pointer;
   font-size: 0.8rem;
@@ -1031,7 +1045,7 @@ dialog label select:focus {
   padding: 0.375rem 0.5rem;
   border: 1px solid var(--border);
   border-radius: 0.375rem;
-  background: var(--bg);
+  background: var(--glass-bg);
   color: var(--text);
   font-size: 0.8rem;
 }
@@ -1124,7 +1138,7 @@ dialog label select:focus {
   font-size: 0.8rem;
   overflow-y: auto;
   max-height: 400px;
-  background: var(--bg);
+  background: var(--code-bg);
   padding: 0.625rem 0.75rem;
   border-radius: 0.375rem;
   border: 1px solid var(--border);
@@ -1227,8 +1241,10 @@ dialog label select:focus {
 }
 
 .running-log {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
   border-radius: 6px;
   padding: 0.75rem;
   font-family: monospace;
@@ -1329,7 +1345,7 @@ dialog label select:focus {
   display: block;
   width: 100%;
   margin-top: 4px;
-  background: var(--bg);
+  background: rgba(8, 15, 26, 0.70);
   border: 1px solid var(--border);
   border-radius: 0.375rem;
   color: var(--text);
@@ -1375,7 +1391,10 @@ dialog label select:focus {
 
 .task-summary-text {
   padding: 0.75rem 1rem;
-  background: var(--surface-1);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
   border-radius: 6px;
   line-height: 1.5;
   white-space: pre-wrap;
@@ -1467,8 +1486,11 @@ dialog label select:focus {
   align-items: center;
   padding: 0.75rem 1.25rem;
   border-radius: 8px;
-  background: var(--card-bg);
-  border: 1px solid var(--border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
   min-width: 80px;
 }
 
@@ -1518,8 +1540,11 @@ dialog label select:focus {
   align-items: center;
   padding: 1rem;
   border-radius: 8px;
-  background: var(--card-bg);
-  border: 1px solid var(--border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
   text-align: center;
 }
 
@@ -1746,7 +1771,11 @@ dialog label select:focus {
   gap: 0.25rem;
   padding: 0.75rem 1rem;
   border-radius: 8px;
-  border: 1px solid var(--border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
   min-width: 160px;
 }
 
@@ -1794,7 +1823,7 @@ dialog label select:focus {
   height: 18px;
   border-radius: 4px;
   overflow: hidden;
-  background: var(--bg-card);
+  background: var(--glass-bg);
   width: 100%;
 }
 
@@ -1840,12 +1869,15 @@ dialog label select:focus {
 }
 
 .story-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
   border-radius: 6px;
   padding: 0.875rem 1rem;
   cursor: pointer;
   transition: border-color 0.15s, background 0.15s;
+  box-shadow: var(--glass-shadow);
 }
 
 .story-card:hover {