updating dark academia stylings

assets/styles/style.css

@@ -26,6 +26,11 @@
     --chip-bg: #f0f0f0;
     --chip-fg: #444;
     --muted: #666;
+    --bg-color: var(--surface);
+    --border-color: var(--border);
+    --border-muted: var(--border);
+    --text-muted: var(--muted);
+    --accent-bg: color-mix(in oklab, var(--accent) 10%, var(--surface));
 
     --font-body:  'DM Sans', system-ui, sans-serif;
     --kb-bg-completed:        #e6f4ea;
@@ -70,12 +75,49 @@
  
 }
 
+:root[data-theme="dark-academia"]{
+    color-scheme: dark;
+    --bg: #11100d;
+    --fg: #f7ecd5;
+    --link: #d8b86f;
+    --heading: #e8cf91;
+    --surface: #1d1a16;
+    --surface-soft: #242019;
+    --accent: #b89145;
+    --code-bg: #191814;
+    --active-toc: rgba(184, 145, 69, 0.18);
+    --note-color: #d9c9aa;
+    --note-bg: rgba(243, 234, 215, 0.05);
+    --border: rgba(217, 190, 124, 0.32);
+    --chip-bg: rgba(184, 145, 69, 0.14);
+    --chip-fg: #f0d89a;
+    --muted: #b6a681;
+    --bg-color: var(--surface);
+    --border-color: var(--border);
+    --border-muted: rgba(217, 190, 124, 0.24);
+    --text-muted: var(--muted);
+    --accent-bg: rgba(184, 145, 69, 0.16);
+
+    --kb-bg-completed:        rgba(68, 106, 87, 0.24);
+    --kb-bg-manager-review:  rgba(184, 145, 69, 0.2);
+    --kb-bg-in-progress:     rgba(82, 93, 117, 0.22);
+    --kb-bg-not-started:     rgba(243, 234, 215, 0.08);
+    --kb-bg-comments:        rgba(125, 47, 54, 0.24);
+
+    --kb-column-border: rgba(217, 190, 124, 0.2);
+    --kb-card-bg: #181510;
+    --kb-card-text: #f3ead7;
+}
+
 @font-face {
     font-family: 'Noto';
     src: url('../fonts/NotoSans-Regular.ttf') format('truetype');
 }
 html, body{
-    background-color: var(--bg);
+    background:
+        radial-gradient(circle at 18% 12%, var(--theme-glow-wine, transparent), transparent 28%),
+        radial-gradient(circle at 84% 18%, var(--theme-glow-green, transparent), transparent 24%),
+        linear-gradient(135deg, var(--theme-bg-start, var(--bg)) 0%, var(--theme-bg-mid, var(--bg)) 42%, var(--theme-bg-end, var(--bg)) 100%);
     color: var(--fg);
     font-size: 16px;
     transition: background-color .3s, color .3s;
@@ -90,6 +132,27 @@ body {
     -webkit-font-smoothing: antialiased;
 }
 
+:root[data-theme="dark-academia"] body {
+    --theme-glow-wine: rgba(125, 47, 54, 0.24);
+    --theme-glow-green: rgba(68, 106, 87, 0.24);
+    --theme-bg-start: #0f0e0b;
+    --theme-bg-mid: #17140f;
+    --theme-bg-end: #211b14;
+}
+
+:root[data-theme="dark-academia"] body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0.16;
+    background-image:
+        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+    background-size: 34px 34px, 34px 34px;
+    mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35));
+}
+
 ::selection {
     background: color-mix(in oklab, var(--accent) 24%, transparent);
 }
@@ -138,6 +201,19 @@ a:hover {
     box-shadow: 0 12px 32px color-mix(in oklab, #000 8%, transparent);
 }
 
+:root[data-theme="dark-academia"] .banner-header,
+:root[data-theme="dark-academia"] .org-src-container,
+:root[data-theme="dark-academia"] #notes-form,
+:root[data-theme="dark-academia"] .note {
+    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+:root[data-theme="dark-academia"] h1,
+:root[data-theme="dark-academia"] h2,
+:root[data-theme="dark-academia"] h3 {
+    font-family: Georgia, "Times New Roman", serif;
+}
+
 .site-brand {
     display: inline-flex;
     align-items: center;