From 15876a4f8650733abf4ee8fe2c61f10457b7f1d8 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Tue, 9 Jun 2026 18:21:02 +0200
Subject: [PATCH] refactor: consolidate css token system and add base utilities

---
 static/assets/style.css | 51 ++++++++++++++++-------------------------
 1 file changed, 20 insertions(+), 31 deletions(-)

diff --git a/static/assets/style.css b/static/assets/style.css
index 522a733..d646b97 100644
--- a/static/assets/style.css
+++ b/static/assets/style.css
@@ -15,46 +15,35 @@
   --color-surface-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
 }
 
+@layer base {
+  button,
+  input,
+  select,
+  textarea,
+  a {
+    border-radius: 0;
+  }
+}
+
+.scrollbar-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+
 :root {
   color-scheme: light dark;
   --skeleton-base: light-dark(#e5e5e5, #1f1f1f);
   --skeleton-highlight: light-dark(#d4d4d4, #2a2a2a);
-  --bg: var(--color-background);
-  --panel: light-dark(#f7f7f7, #181818);
-  --panel-soft: light-dark(#ececec, #202020);
-  --header: light-dark(#ffffff, #101010);
-  --text: light-dark(#111111, #e7e5e4);
-  --text-muted: light-dark(#666666, #a8a29e);
-  --text-faint: light-dark(#9a9a9a, #78716c);
-  --accent: var(--color-accent);
-  --danger: #dc2626;
-  --surface-thumb: light-dark(#cccccc, #44403c);
-  --surface-tab-hover: light-dark(#e4e4e4, #202020);
-  --surface-tab-active: light-dark(#1e1b17, #fafaf9);
-  --text-tab-active: light-dark(#fafaf9, #0c0a09);
-  --surface-select: light-dark(#ffffff, #181818);
-  --text-on-accent: light-dark(#fafaf9, #0c0a09);
-  --overlay-subtle: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04));
   --border: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
   --border-light: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.035));
-  --shadow-subtle: light-dark(0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.18));
   --shadow-card: light-dark(0 2px 8px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.28));
-  --shadow-card-hover: light-dark(0 6px 18px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(0, 0, 0, 0.34));
   --scrollbar-track: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
   --scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.2));
   --scrollbar-thumb-hover: light-dark(rgba(0, 0, 0, 0.26), rgba(255, 255, 255, 0.3));
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.25rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
-  --poster-max-height: 360px;
-  --font: "DM Sans", "Segoe UI", system-ui, sans-serif;
-  --font-serif: "Newsreader", ui-serif, Georgia, serif;
-  --font-mono: ui-monospace, "SF Mono", "Geist Mono", "JetBrains Mono", monospace;
-  --radius: 0px;
 }
 
 html[data-theme="light"] {
@@ -68,7 +57,7 @@ html[data-theme="dark"] {
 html,
 body {
   background-color: var(--color-background);
-  color: var(--text);
+  color: var(--color-foreground);
 }
 
 .skeleton {