frontend/src/styles/tokens.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --cs-canvas:       #0A0F1C;
  --cs-panel:        #0F1729;
  --cs-raised:       #111827;
  --cs-input:        #1F2937;
  --cs-input-soft:   #131B2E;
  --cs-cyan:         #00D4FF;
  --cs-cyan-strong:  #22E0FF;
  --cs-teal:         #06B6D4;
  --cs-cyan-soft:    rgba(0,212,255,0.12);
  --cs-cyan-glow:    rgba(0,212,255,0.25);
  --cs-green:        #10B981;
  --cs-green-soft:   rgba(16,185,129,0.14);
  --cs-amber:        #F59E0B;
  --cs-amber-soft:   rgba(245,158,11,0.14);
  --cs-red:          #EF4444;
  --cs-red-soft:     rgba(239,68,68,0.14);
  --cs-fg-1:         #F8FAFC;
  --cs-fg-2:         #CBD5E1;
  --cs-fg-3:         #94A3B8;
  --cs-fg-4:         #64748B;
  --cs-border:       rgba(148,163,184,0.12);
  --cs-border-hover: rgba(148,163,184,0.24);
  --cs-border-focus: rgba(0,212,255,0.40);
  --cs-font-sans:    'Inter', system-ui, sans-serif;
  --cs-font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --cs-shadow-glow:  0 0 24px rgba(0,212,255,0.25);
  --cs-shadow-lift:  0 8px 24px rgba(0,0,0,0.40);
  --cs-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.03);
  --cs-ease:         cubic-bezier(0.22,1,0.36,1);
  --cs-dur:          240ms;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cs-canvas);
  color: var(--cs-fg-2);
  font-family: var(--cs-font-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.4); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }