frontend/src/index.css

@import "tailwindcss";

@theme {
  --font-display: 'Instrument Serif', serif;
  --font-body: 'Inter', sans-serif;
  
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-muted: hsl(var(--muted));
  --color-accent: hsl(var(--accent));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
}

@layer base {
  :root {
    --background: 201 100% 13%;
    --foreground: 0 0% 100%;
    --muted-foreground: 240 4% 66%;
    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 4%;
    --secondary: 0 0% 10%;
    --muted: 0 0% 10%;
    --accent: 0 0% 10%;
    --border: 0 0% 18%;
    --input: 0 0% 18%;

    /* QuantIQ Design Tokens */
    --neon-cyan:      #00f2fe;
    --neon-violet:    #a154ff;
    --bull-green:     #00e676;
    --bear-red:       #ff1744;
    --bg-space:       #06070d;
    --bg-panel:       #0d101b;
    --bg-card:        #111420;
    --border-glass:   rgba(255, 255, 255, 0.07);
    --border-glow:    rgba(0, 242, 254, 0.18);
    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted:     #475569;
    --font-mono:      'JetBrains Mono', 'Fira Code', monospace;
    --font-display:   'Instrument Serif', serif;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-body);
    margin: 0;
    overflow-x: hidden;
  }
}

/* Liquid Glass Effect */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Animations */
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-rise {
  animation: fade-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-fade-rise-delay {
  animation: fade-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.animate-fade-rise-delay-2 {
  animation: fade-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}