feat: redesign color system to monochrome palette with sharp corners

frontend/src/style.css

@@ -6,17 +6,17 @@
   --font-display: "Space Grotesk", "Segoe UI", sans-serif;
   --font-mono: "IBM Plex Mono", Consolas, monospace;
 
-  --bg-0: #32292f;
+  --bg-0: #000000;
-  --bg-1: #3d3238;
+  --bg-1: #0a0a0a;
-  --bg-2: #2a2027;
+  --bg-2: #000000;
   --ink-0: #ede8e6;
-  --ink-1: #c4bdb9;
+  --ink-1: #b0a8a4;
-  --ink-soft: #8a827e;
+  --ink-soft: #78706c;
 
-  --panel: #362d33;
+  --panel: #111111;
-  --panel-2: #3f343b;
+  --panel-2: #1a1a1a;
-  --line: #4a3f46;
+  --line: #2a2a2a;
-  --line-soft: #42373e;
+  --line-soft: #1f1f1f;
 
   --brand: #587792;
   --brand-strong: #4a6780;
@@ -24,29 +24,29 @@
   --ok: #04650d;
   --warn: #d49624;
   --danger: #c44a5e;
-  --danger-soft: #3a2328;
+  --danger-soft: #1f1216;
 
   --focus: #2ebfa5;
-  --shadow-1: 0 14px 30px rgba(0, 0, 0, 0.34);
+  --shadow-1: 0 14px 30px rgba(0, 0, 0, 0.5);
-  --shadow-2: 0 22px 44px rgba(0, 0, 0, 0.45);
+  --shadow-2: 0 22px 44px rgba(0, 0, 0, 0.6);
 
-  --bg-grad-a: #392e35;
+  --bg-grad-a: #000000;
-  --bg-grad-b: var(--bg-0);
+  --bg-grad-b: #000000;
-  --bg-grad-c: var(--bg-2);
+  --bg-grad-c: #000000;
 
   --live-dot: #ff6b6b;
-  --overlay-bg: rgba(26, 20, 23, 0.84);
+  --overlay-bg: rgba(0, 0, 0, 0.88);
 
-  --input-bg: #2d2429;
+  --input-bg: #0d0d0d;
   --input-border: var(--line-soft);
-  --placeholder: #7a7270;
+  --placeholder: #6a6260;
 
   --badge-start: #2ebfa5;
   --badge-end: #1a8c78;
 
-  --radius-1: 0.6rem;
+  --radius-1: 0;
-  --radius-2: 1rem;
+  --radius-2: 0;
-  --radius-3: 1.6rem;
+  --radius-3: 0;
 
   --space-1: 0.25rem;
   --space-2: 0.5rem;
@@ -63,17 +63,17 @@
   :root {
     color-scheme: light;
 
-    --bg-0: #b4c4ae;
+    --bg-0: #e8e8e8;
-    --bg-1: #a3b59c;
+    --bg-1: #dcdcdc;
-    --bg-2: #c5d1c0;
+    --bg-2: #f0f0f0;
-    --ink-0: #1a1f18;
+    --ink-0: #0d0d0d;
-    --ink-1: #3a4037;
+    --ink-1: #2a2a2a;
-    --ink-soft: #5c6358;
+    --ink-soft: #555555;
 
     --panel: #ffffff;
-    --panel-2: #f4f8f0;
+    --panel-2: #f5f5f5;
-    --line: #9aad93;
+    --line: #cccccc;
-    --line-soft: #bcc8b5;
+    --line-soft: #dddddd;
 
     --brand: #587792;
     --brand-strong: #4a6780;
@@ -84,19 +84,19 @@
     --danger-soft: #fff3f6;
 
     --focus: #2ebfa5;
-    --shadow-1: 0 14px 30px rgba(50, 41, 47, 0.1);
+    --shadow-1: 0 8px 20px rgba(0, 0, 0, 0.08);
-    --shadow-2: 0 22px 44px rgba(50, 41, 47, 0.16);
+    --shadow-2: 0 16px 36px rgba(0, 0, 0, 0.12);
 
-    --bg-grad-a: #c5d1c0;
+    --bg-grad-a: #e8e8e8;
     --bg-grad-b: var(--bg-0);
-    --bg-grad-c: #d5e0d0;
+    --bg-grad-c: #f0f0f0;
 
     --live-dot: #cb271a;
-    --overlay-bg: rgba(26, 20, 23, 0.84);
+    --overlay-bg: rgba(0, 0, 0, 0.88);
 
     --input-bg: #ffffff;
-    --input-border: #bcc8b5;
+    --input-border: #cccccc;
-    --placeholder: #7a8274;
+    --placeholder: #888888;
 
     --badge-start: #2ebfa5;
     --badge-end: #1a8c78;
@@ -375,7 +375,7 @@ select {
 }
 
 .viewer-header {
-  padding: var(--space-5);
+  padding: var(--space-3) var(--space-4);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -392,7 +392,7 @@ select {
 .brand-badge {
   width: 2.5rem;
   height: 2.5rem;
-  border-radius: 0.9rem;
+  border-radius: 0;
   display: grid;
   place-items: center;
   font-weight: 800;
@@ -424,7 +424,7 @@ select {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
-  border-radius: 999px;
+  border-radius: 0;
   background: var(--panel);
   border: 1px solid var(--line);
   color: var(--ink-1);
@@ -447,7 +447,7 @@ select {
 .player {
   width: 100%;
   height: 100%;
-  border-radius: 1.1rem;
+  border-radius: 0;
   border: 1px solid var(--line-soft);
   background: #000;
   box-shadow: var(--shadow-1);
@@ -467,14 +467,14 @@ select {
   background: var(--overlay-bg);
   color: #f0fffb;
   padding: 0.44rem 0.72rem;
-  border-radius: 999px;
+  border-radius: 0;
   backdrop-filter: blur(3px);
 }
 
 .live-label {
   background: var(--live-dot);
   color: #fff;
-  border-radius: 999px;
+  border-radius: 0;
   padding: 0.1rem 0.45rem;
   font-size: 0.72rem;
   font-weight: 700;
@@ -542,7 +542,7 @@ select {
 
 .message-bubble {
   max-width: 83%;
-  border-radius: 1rem;
+  border-radius: 0;
   padding: 0.58rem 0.72rem;
   box-shadow: var(--shadow-1);
   animation: messageIn var(--fast);
@@ -563,7 +563,7 @@ select {
   color: var(--ink-1);
   background: color-mix(in srgb, var(--brand) 22%, var(--panel-2));
   border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line));
-  border-radius: 999px;
+  border-radius: 0;
   padding: 0.24rem 0.68rem;
   animation: messageIn var(--fast);
 }
@@ -609,18 +609,7 @@ select {
 .admin-body {
   min-height: 100vh;
   padding: var(--space-4);
-  background:
+  background: #000000;
-    radial-gradient(
-      circle at 82% 12%,
-      rgba(20, 48, 54, 0.5) 0%,
-      transparent 44%
-    ),
-    radial-gradient(
-      circle at 16% 85%,
-      rgba(8, 28, 34, 0.55) 0%,
-      transparent 40%
-    ),
-    var(--bg-0);
 }
 
 .admin-shell {