Update index.html

index.html

@@ -56,54 +56,85 @@ tailwind.config = {
   }
 }
 </script>
-<link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;1,9..144,300&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Syne:wght@400;700;800&display=swap" rel="stylesheet">
 <style>
   * { box-sizing: border-box; }
-  body { font-family: 'DM Mono', monospace; }
+  body { font-family: 'Inter', sans-serif; }
 
   body {
-    --bg:        #0d0d0f;
-    --surface:   #1a1a1f;
-    --border:    #2a2a32;
-    --mist:      #3d3d48;
-    --fog:       #6b6b7a;
-    --ghost:     #9898a8;
-    --pearl:     #c8c8d8;
-    --cream:     #e8e4dc;
-    --accent:    #d4a853;
-    --accent2:   #c47c3a;
-    --ink:       #0d0d0f;
-    --user-bg:   #d4a853;
-    --user-text: #0d0d0f;
-    --danger:    #b85c5c;
-    --safe:      #6b8f71;
-    --prose:     #c8c8d8;
-    --code-bg:   rgba(255,255,255,0.08);
-    --code-col:  #d4a853;
-    --pre-bg:    #111116;
+    --bg:        #080e1a;
+    --surface:   #0d1526;
+    --border:    #1a2a45;
+    --mist:      #152035;
+    --fog:       #3a5580;
+    --ghost:     #6a90c0;
+    --pearl:     #a0c0e8;
+    --cream:     #d0e4f8;
+    --accent:    #4a9eff;
+    --accent2:   #2a7ee0;
+    --ink:       #080e1a;
+    --user-bg:   #1a4a8a;
+    --user-text: #d0e4f8;
+    --danger:    #e05050;
+    --safe:      #40a880;
+    --prose:     #a0c0e8;
+    --code-bg:   rgba(74,158,255,0.08);
+    --code-col:  #60c0ff;
+    --pre-bg:    #060c18;
   }
   body.light {
-    --bg:        #f5f0e8;
-    --surface:   #ede8df;
-    --border:    #d8d0c4;
-    --mist:      #cfc7b8;
-    --fog:       #8a8070;
-    --ghost:     #6a6058;
-    --pearl:     #3a3028;
-    --cream:     #1a1208;
-    --accent:    #9a6010;
-    --accent2:   #7a4a08;
-    --ink:       #f5f0e8;
-    --user-bg:   #9a6010;
-    --user-text: #f5f0e8;
-    --danger:    #993030;
-    --safe:      #3a6a3a;
-    --prose:     #3a3028;
-    --code-bg:   rgba(0,0,0,0.07);
-    --code-col:  #7a4a08;
-    --pre-bg:    #e4ddd0;
+    --bg:        #eaf2ff;
+    --surface:   #ddeaf8;
+    --border:    #b8d0f0;
+    --mist:      #ccdff5;
+    --fog:       #6090c0;
+    --ghost:     #3a6090;
+    --pearl:     #1a3a6a;
+    --cream:     #0a1a3a;
+    --accent:    #1a60d0;
+    --accent2:   #0a48b0;
+    --ink:       #eaf2ff;
+    --user-bg:   #1a60d0;
+    --user-text: #eaf2ff;
+    --danger:    #c03030;
+    --safe:      #208860;
+    --prose:     #1a3a6a;
+    --code-bg:   rgba(26,96,208,0.07);
+    --code-col:  #0a48b0;
+    --pre-bg:    #d8eaf8;
   }
 
+  body                { background: var(--bg); color: var(--pearl); }
+  #sidebar            { background: var(--surface); border-color: var(--border); }
+  header              { background: var(--surface); border-color: var(--border); }
+  .bg-smoke           { background: var(--surface) !important; }
+  .bg-ash             { background: var(--mist) !important; }
+  .bg-mist            { background: var(--mist) !important; }
+  .hover\:bg-ash:hover  { background: var(--border) !important; }
+  .hover\:bg-mist:hover { background: var(--mist) !important; }
+  .border-ash         { border-color: var(--border) !important; }
+  .border-mist        { border-color: var(--mist) !important; }
+  .text-fog           { color: var(--fog) !important; }
+  .text-ghost         { color: var(--ghost) !important; }
+  .text-pearl         { color: var(--pearl) !important; }
+  .text-cream         { color: var(--cream) !important; }
+  .text-amber         { color: var(--accent) !important; }
+  .text-ink           { color: var(--user-text) !important; }
+  .text-rose          { color: var(--danger) !important; }
+  .text-sage          { color: var(--safe) !important; }
+  .bg-amber           { background: var(--user-bg) !important; }
+  .hover\:bg-ember:hover { background: var(--accent2) !important; }
+  .bg-amber\/10       { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
+  .bg-amber\/20       { background: color-mix(in srgb, var(--accent) 20%, transparent) !important; }
+  .border-amber\/25   { border-color: color-mix(in srgb, var(--accent) 25%, transparent) !important; }
+  .from-amber         { --tw-gradient-from: var(--accent) !important; }
+  .to-ember           { --tw-gradient-to: var(--accent2) !important; }
+  .bg-rose            { background: var(--danger) !important; }
+  .hover\:text-rose:hover  { color: var(--danger) !important; }
+  .hover\:text-sage:hover  { color: var(--safe) !important; }
+  .hover\:text-pearl:hover { color: var(--pearl) !important; }
+  textarea, input, select { background: var(--mist); color: var(--cream); }
+
   body:not(.light) {
     background-image:
       radial-gradient(1px 1px at 20% 30%, rgba(160,200,255,0.4) 0%, transparent 100%),
@@ -1146,4 +1177,4 @@ function closeSidebar() {
 init();
 </script>
 </body>
-</html>
+</html>