update

frontend/src/styles/globals.css

@@ -0,0 +1,274 @@
+@import url('https://fonts.googleapis.com/css2?family=TeleNeo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Light mode (default) */
+:root {
+  --t-bg: #ffffff;
+  --t-bg-card: #ffffff;
+  --t-bg-hover: #f8f8fc;
+  --t-bg-elevated: #fafafa;
+  --t-border: #e8e8f0;
+  --t-border-light: #d0d0d8;
+  --t-text: #1a1a2e;
+  --t-text2: #4a4a5a;
+  --t-text3: #7a7a8a;
+  --t-green: #00b89c;
+  --t-orange: #ff7700;
+  --t-accent-glow: rgba(226,0,116,0.08);
+  --t-pattern-opacity: 0.04;
+}
+
+/* Dark mode */
+.dark {
+  --t-bg: #0a0a12;
+  --t-bg-card: #12121f;
+  --t-bg-hover: #1a1a2e;
+  --t-bg-elevated: #1e1e30;
+  --t-border: #2a2a40;
+  --t-border-light: #4a4a60;
+  --t-text: #ffffff;
+  --t-text2: #c0c0d0;
+  --t-text3: #9a9aaa;
+  --t-green: #00d4aa;
+  --t-orange: #ff8800;
+  --t-accent-glow: rgba(226,0,116,0.12);
+  --t-pattern-opacity: 0.03;
+}
+
+/* Base styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  font-family: 'TeleNeo', 'Segoe UI', system-ui, sans-serif;
+  overflow-x: hidden;
+  font-feature-settings: 'kern' 1;
+  color: #1a1a2e;
+  background: #ffffff;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Dark mode body */
+.dark body,
+body.dark-mode {
+  color: #fff;
+  background: #0a0a12;
+}
+
+/* Selection */
+::selection {
+  background: rgba(226, 0, 116, 0.3);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #e20074, #be0060);
+  border-radius: 4px;
+}
+
+/* Monospace font class */
+.mono {
+  font-family: 'JetBrains Mono', monospace;
+}
+
+/* Smooth transitions for theme */
+* {
+  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
+}
+
+/* Exclude buttons from auto-transition for custom hover effects */
+button, input {
+  transition: none;
+}
+
+/* T-Systems Button Style */
+.t-btn,
+.t-btn:hover {
+  transition: all 0.3s ease;
+}
+
+.t-btn {
+  background: linear-gradient(135deg, #e20074 0%, #be0060 100%);
+}
+
+.t-btn:hover {
+  background: linear-gradient(135deg, #f0208a 0%, #d01070 100%);
+  box-shadow: 0 4px 20px rgba(226,0,116,0.4);
+  transform: translateY(-1px);
+}
+
+/* T-Systems Gradient Background */
+.t-gradient-bg {
+  background: linear-gradient(135deg, #0a0a12 0%, #1a1a2e 50%, #0a0a12 100%);
+}
+
+/* Magenta Glow */
+.magenta-glow {
+  box-shadow: 0 0 20px rgba(226,0,116,0.15), 0 0 40px rgba(226,0,116,0.05);
+}
+
+/* Card gradient for dark mode */
+.dark .t-card-gradient {
+  background: linear-gradient(180deg, #12121f, #0a0a12);
+}
+
+/* Card gradient for light mode */
+:not(.dark) .t-card-gradient {
+  background: linear-gradient(180deg, #ffffff, #fafafa);
+}
+
+/* Light mode shadow for cards */
+:not(.dark) .t-card-shadow {
+  box-shadow: 0 2px 8px rgba(226,0,116,0.04);
+}
+
+:not(.dark) .t-card-shadow-lg {
+  box-shadow: 0 4px 16px rgba(226,0,116,0.08);
+}
+
+/* Accent glow */
+.t-accent-glow {
+  box-shadow: 0 0 12px rgba(226,0,116,0.5), 0 0 24px rgba(226,0,116,0.2);
+}
+
+/* High risk glow */
+.t-risk-high-glow {
+  box-shadow: 0 0 8px rgba(255,68,68,0.3);
+}
+
+/* Medium risk glow */
+.t-risk-medium-glow {
+  box-shadow: 0 0 6px rgba(255,136,0,0.2);
+}
+
+/* Low risk glow */
+.t-risk-low-glow {
+  box-shadow: 0 0 4px rgba(0,212,170,0.15);
+}
+
+/* Pulse glow animation */
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 12px rgba(226,0,116,0.5), 0 0 24px rgba(226,0,116,0.2);
+  }
+  50% {
+    box-shadow: 0 0 16px rgba(226,0,116,0.7), 0 0 32px rgba(226,0,116,0.3);
+  }
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s infinite;
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 12px rgba(226,0,116,0.5), 0 0 24px rgba(226,0,116,0.2);
+  }
+  50% {
+    box-shadow: 0 0 16px rgba(226,0,116,0.7), 0 0 32px rgba(226,0,116,0.3);
+  }
+}
+
+/* Slide up animation */
+@keyframes slideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-slide-up {
+  animation: slideUp 0.3s ease;
+}
+
+/* Slide in animation */
+@keyframes slideIn {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in {
+  animation: slideIn 0.3s ease-out forwards;
+}
+
+/* Slide out animation */
+@keyframes slideOut {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate-slide-out {
+  animation: slideOut 0.3s ease-in forwards;
+}
+
+/* Pulse animation for processing steps */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(0.95);
+  }
+}
+
+.animate-pulse {
+  animation: pulse 0.6s ease-in-out infinite;
+}
+
+/* Spin animation for loading icons */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Custom utility classes */
+@layer utilities {
+  .gradient-accent {
+    background: linear-gradient(135deg, #e20074 0%, #be0060 100%);
+  }
+
+  .gradient-accent-hover {
+    background: linear-gradient(135deg, #f0208a 0%, #d01070 100%);
+  }
+}