From b638c94cdeb60b5eef9405c04abcd91bab7de0b3 Mon Sep 17 00:00:00 2001
From: Charlie <charlie@solid-apps.local>
Date: Tue, 9 Jun 2026 09:57:12 +0200
Subject: [PATCH] schema-apps: add polished dark mode

---
 app.css | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/app.css b/app.css
index ca899ca..c707f0d 100644
--- a/app.css
+++ b/app.css
@@ -243,3 +243,73 @@ footer a {
   transition: color .15s;
 }
 footer a:hover { color: var(--accent-2); }
+
+/* ──────────────────────────────────────────────
+   Dark mode — @media (prefers-color-scheme: dark)
+   Linear / Stripe dark aesthetic. Overrides only
+   colors & shadows; layout & sizing unchanged.
+   ────────────────────────────────────────────── */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ink: #e4e8f1;
+    --ink-2: #c9cdd8;
+    --muted: #8b8fa3;
+    --muted-2: #6b6f82;
+    --line: #262a3a;
+    --line-2: #1e2130;
+    --card: #161927;
+    --surface: #1c1f31;
+    --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
+    --shadow: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px -6px rgba(0,0,0,.4);
+    --shadow-hover: 0 2px 6px rgba(0,0,0,.35), 0 16px 40px -8px rgba(0,0,0,.5);
+  }
+
+  body {
+    background:
+      radial-gradient(ellipse 1000px 500px at 10% -5%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%),
+      radial-gradient(ellipse 800px 400px at 105% 5%, color-mix(in oklab, var(--accent-2) 8%, transparent), transparent 55%),
+      #0e1019;
+  }
+
+  /* Header band: richer glow in dark */
+  .hd {
+    background: linear-gradient(160deg,
+      color-mix(in oklab, var(--accent) 85%, #000) 0%,
+      color-mix(in oklab, var(--accent-2) 85%, #000) 100%);
+  }
+  .hd::before {
+    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
+  }
+  .hd::after {
+    background: radial-gradient(140% 140% at -10% -10%, rgba(255,255,255,.15), transparent 50%);
+  }
+  .hd .icon {
+    background: rgba(255,255,255,.1);
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.3);
+  }
+
+  /* Row hover */
+  .row:hover { background: color-mix(in oklab, var(--accent) 8%, var(--surface)); }
+
+  /* Inputs */
+  input, textarea {
+    background: var(--surface);
+    border-color: var(--line);
+    color: var(--ink);
+  }
+  input:hover, textarea:hover {
+    border-color: color-mix(in oklab, var(--muted) 50%, var(--line));
+  }
+  input:focus, textarea:focus {
+    background: color-mix(in oklab, var(--surface) 80%, #000);
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent), var(--shadow-sm);
+  }
+
+  /* Code block: already dark, just bump contrast */
+  pre {
+    background: #0a0d14;
+    border-color: #1a1f2e;
+    color: #b8c0d0;
+  }
+}