From 24424cc226431cb0571412c5bbae7d71200a5ed3 Mon Sep 17 00:00:00 2001
From: almazlar <almazlarb@gmail.com>
Date: Sun, 22 Feb 2026 18:38:51 +0300
Subject: [PATCH] feat: update CSS variables for improved theming and styling

---
 frontend/src/index.css | 146 ++++++++++++++++++++++++++++++-----------
 1 file changed, 108 insertions(+), 38 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 195dd91..2d8cfac 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,58 +1,128 @@
 :root {
-  --bg-color: #0f172a;
-  --panel-bg: rgba(30, 41, 59, 0.7);
-  --text-main: #f8fafc;
-  --text-muted: #94a3b8;
-  --accent-primary: #8b5cf6;
-  --accent-secondary: #ec4899;
-  --success: #10b981;
-  --danger: #ef4444;
-  --border-color: rgba(255, 255, 255, 0.1);
-  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
-  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    --rich-cerulean-50: #eaf4fb;
+    --rich-cerulean-100: #d5eaf6;
+    --rich-cerulean-200: #aad5ee;
+    --rich-cerulean-300: #80c0e5;
+    --rich-cerulean-400: #56abdc;
+    --rich-cerulean-500: #2b96d4;
+    --rich-cerulean-600: #2378a9;
+    --rich-cerulean-700: #1a5a7f;
+    --rich-cerulean-800: #113c55;
+    --rich-cerulean-900: #091e2a;
+    --rich-cerulean-950: #06151e;
+
+    --sand-dune-50: #f7f5ed;
+    --sand-dune-100: #f0ebdb;
+    --sand-dune-200: #e1d6b7;
+    --sand-dune-300: #d2c293;
+    --sand-dune-400: #c3ae6f;
+    --sand-dune-500: #b49a4b;
+    --sand-dune-600: #907b3c;
+    --sand-dune-700: #6c5c2d;
+    --sand-dune-800: #483d1e;
+    --sand-dune-900: #241f0f;
+    --sand-dune-950: #19160b;
+
+    --alice-blue-50: #ecf3f8;
+    --alice-blue-100: #dae7f1;
+    --alice-blue-200: #b4cfe4;
+    --alice-blue-300: #8fb7d6;
+    --alice-blue-400: #699fc9;
+    --alice-blue-500: #4487bb;
+    --alice-blue-600: #366c96;
+    --alice-blue-700: #295170;
+    --alice-blue-800: #1b364b;
+    --alice-blue-900: #0e1b25;
+    --alice-blue-950: #09131a;
+
+    --ink-black-50: #eef2f6;
+    --ink-black-100: #dee6ed;
+    --ink-black-200: #bdccdb;
+    --ink-black-300: #9cb2c9;
+    --ink-black-400: #7a99b8;
+    --ink-black-500: #597fa6;
+    --ink-black-600: #476685;
+    --ink-black-700: #364c63;
+    --ink-black-800: #243342;
+    --ink-black-900: #121921;
+    --ink-black-950: #0c1217;
+
+    --taupe-50: #f4f2f0;
+    --taupe-100: #e9e4e2;
+    --taupe-200: #d3cac5;
+    --taupe-300: #bdafa8;
+    --taupe-400: #a7958b;
+    --taupe-500: #917a6e;
+    --taupe-600: #746258;
+    --taupe-700: #574942;
+    --taupe-800: #3a312c;
+    --taupe-900: #1d1816;
+    --taupe-950: #14110f;
+
+    /* New CSS Variables */
+    --bg-color: var(--rich-cerulean-950);
+    --panel-bg: rgba(30, 41, 59, 0.7);
+    --text-main: var(--alice-blue-200);
+    --text-muted: var(--sand-dune-600);
+    --accent-primary: var(--taupe-500);
+    --accent-secondary: var(--rich-cerulean-300);
+    --success: var(--sand-dune-200);
+    --danger: var(--ink-black-400);
+    --border-color: rgba(255, 255, 255, 0.1);
+    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
 }
 
 body {
-  font-family: var(--font-family);
-  background-color: var(--bg-color);
-  background-image: radial-gradient(circle at top right, rgba(139, 92, 246, 0.15), transparent 40%),
-    radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.15), transparent 40%);
-  color: var(--text-main);
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  padding: 4rem 1rem;
+    font-family: var(--font-family);
+    background-color: var(--bg-color);
+    background-image: radial-gradient(circle at top right, rgba(139, 92, 246, 0.15), transparent 40%),
+        radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.15), transparent 40%);
+    color: var(--text-main);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 4rem 1rem;
 }
 
 @media (max-width: 768px) {
-  body {
-    padding: 2rem 1rem;
-  }
+    body {
+        padding: 2rem 1rem;
+    }
 }
 
 @media (max-width: 480px) {
-  body {
-    padding: 0;
-    align-items: flex-start;
-  }
+    body {
+        padding: 0;
+        align-items: flex-start;
+    }
 }
 
 button {
-  cursor: pointer;
-  font-family: inherit;
-  border: none;
-  outline: none;
-  transition: all 0.3s ease;
+    cursor: pointer;
+    font-family: inherit;
+    border: none;
+    outline: none;
+    transition: all 0.3s ease;
+    background-color: var(--accent-primary);
+    color: var(--text-main);
+    padding: 10px 20px;
+    border-radius: 4px;
 }
 
 input {
-  font-family: inherit;
-  outline: none;
+    font-family: inherit;
+    outline: none;
+    background-color: var(--bg-color);
+    color: var(--text-main);
+    padding: 8px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
 }
\ No newline at end of file