src/styles/global.css

@@ -1,5 +1,9 @@
 body {
-  background: var(--color-bg);
+  background-image: url('../assets/common/background.jpeg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
   color: var(--color-text);
   font-family: var(--font-family-base);
   line-height: 1.5;

src/styles/tokens.css

@@ -6,18 +6,21 @@
     sans-serif;
 
   --color-white: #ffffff;
-  --color-black: #0b1220;
+  --color-black: #030610;
-  --color-gray-50: #f8fafc;
+  --color-gray-50: #f6f8ff;
-  --color-gray-100: #f1f5f9;
+  --color-gray-100: #ecf2ff;
-  --color-gray-200: #e2e8f0;
+  --color-gray-200: #d8e3fb;
-  --color-gray-300: #cbd5e1;
+  --color-gray-300: #b8c7e7;
-  --color-gray-500: #64748b;
+  --color-gray-500: #7888aa;
-  --color-gray-600: #475569;
+  --color-gray-600: #52617f;
-  --color-gray-700: #334155;
+  --color-gray-700: #243452;
-  --color-gray-900: #0f172a;
+  --color-gray-900: #07142d;
-  --color-teal-50: #ecfeff;
+  --color-cyan-50: #e9fbff;
-  --color-teal-600: #0d9488;
+  --color-cyan-400: #35d8ff;
-  --color-teal-700: #0f766e;
+  --color-cyan-600: #0899d8;
+  --color-violet-500: #8f54ff;
+  --color-coral-500: #ff6b79;
+  --color-gold-400: #ffc96b;
   --color-rose-50: #fff1f2;
   --color-rose-200: #fecdd3;
   --color-rose-700: #be123c;
@@ -25,15 +28,18 @@
   --color-green-200: #bbf7d0;
   --color-green-800: #166534;
 
-  --color-bg: var(--color-gray-50);
+  --color-bg: #050914;
-  --color-surface: var(--color-white);
+  --color-surface: rgba(9, 18, 42, 0.86);
-  --color-surface-muted: var(--color-gray-100);
+  --color-surface-muted: rgba(17, 32, 67, 0.78);
-  --color-text: var(--color-gray-900);
+  --color-text: #f7fbff;
-  --color-text-muted: var(--color-gray-600);
+  --color-text-muted: #aab8d8;
-  --color-border: var(--color-gray-200);
+  --color-border: rgba(82, 208, 255, 0.22);
-  --color-primary: var(--color-teal-700);
+  --color-primary: var(--color-cyan-400);
-  --color-primary-hover: #115e59;
+  --color-primary-hover: var(--color-gold-400);
-  --color-primary-soft: rgba(13, 148, 136, 0.12);
+  --color-primary-soft: rgba(53, 216, 255, 0.16);
+  --color-accent: var(--color-violet-500);
+  --color-accent-warm: var(--color-coral-500);
+  --color-accent-gold: var(--color-gold-400);
   --color-danger-bg: var(--color-rose-50);
   --color-danger-border: var(--color-rose-200);
   --color-danger-text: var(--color-rose-700);
@@ -55,8 +61,8 @@
   --radius-md: 8px;
   --radius-lg: 12px;
 
-  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
-  --shadow-lg: 0 24px 80px rgba(15, 23, 42, 0.14);
+  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.36);
 
   --duration-fast: 160ms;
   --ease-standard: ease;