frontend/src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ─── CSS Variables ─────────────────────────────────────────────────────────── */
@layer base {
  :root {
    --background: 0 0% 3%;
    --foreground: 0 0% 98%;
    --radius: 0.625rem;

    /* Dark mode (default) */
    --bg:          #050505;
    --bg-secondary:#0d0d0d;
    --fg:          #fafafa;
    --fg-muted:    #a1a1aa;
    --fg-subtle:   #71717a;
    --card-bg:     rgba(255,255,255,0.04);
    --card-hover:  rgba(255,255,255,0.06);
    --border:      rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);
    --input-bg:    rgba(255,255,255,0.05);
    --navbar-bg:   rgba(0,0,0,0.5);
    --sidebar-bg:  rgba(0,0,0,0.6);
    --ambient-1:   rgba(37,99,235,0.10);
    --ambient-2:   rgba(5,150,105,0.10);
    --ambient-3:   rgba(124,58,237,0.05);
  }

  html.light {
    --bg:          #f0f4f8;
    --bg-secondary:#e8edf3;
    --fg:          #0f172a;
    --fg-muted:    #475569;
    --fg-subtle:   #94a3b8;
    --card-bg:     rgba(255,255,255,0.95);
    --card-hover:  rgba(255,255,255,1);
    --border:      rgba(15,23,42,0.10);
    --border-strong: rgba(15,23,42,0.18);
    --input-bg:    rgba(255,255,255,0.9);
    --navbar-bg:   rgba(240,244,248,0.90);
    --sidebar-bg:  rgba(255,255,255,0.97);
    --ambient-1:   rgba(37,99,235,0.06);
    --ambient-2:   rgba(5,150,105,0.06);
    --ambient-3:   rgba(124,58,237,0.04);
  }

  * { border-color: var(--border); box-sizing: border-box; }

  body {
    background-color: var(--bg);
    color: var(--fg);
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  html { font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); }
}

/* ─── Glassmorphism utilities ────────────────────────────────────────────────── */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .glass {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
  }

  .glass-strong {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid var(--border-strong);
  }
  html.light .glass-strong {
    background: rgba(255,255,255,0.95);
  }

  .glass-card {
    border-radius: 1rem;
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  /* Light mode overrides */
  html.light .glass-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: 0 2px 16px rgba(15,23,42,0.08), 0 1px 4px rgba(15,23,42,0.06);
  }
  html.light .glass {
    background: rgba(255,255,255,0.80);
    border: 1px solid var(--border);
  }
  html.light .shimmer {
    background: linear-gradient(90deg, rgba(15,23,42,0.04) 0%, rgba(15,23,42,0.09) 50%, rgba(15,23,42,0.04) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  /* ── Adaptive text helpers ── */
  .text-adaptive {
    color: var(--fg);
  }
  .text-adaptive-muted {
    color: var(--fg-muted);
  }
  .text-adaptive-subtle {
    color: var(--fg-subtle);
  }

  /* Gradient text */
  .gradient-text {
    background: linear-gradient(135deg, #60a5fa, #22d3ee, #34d399);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gradient-text-gold {
    background: linear-gradient(135deg, #fbbf24, #f97316);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Glow effects (toned down in light mode) */
  .glow-blue {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3), 0 0 60px rgba(59, 130, 246, 0.1);
  }
  .glow-emerald {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.3), 0 0 60px rgba(16, 185, 129, 0.1);
  }
  .glow-purple {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.3), 0 0 60px rgba(139, 92, 246, 0.1);
  }
  html.light .glow-blue   { box-shadow: 0 0 20px rgba(59,130,246,0.15); }
  html.light .glow-emerald{ box-shadow: 0 0 20px rgba(16,185,129,0.15); }
  html.light .glow-purple { box-shadow: 0 0 20px rgba(139,92,246,0.15); }

  /* Streaming text cursor */
  .streaming-cursor::after {
    content: '▋';
    animation: blink 0.7s step-end infinite;
    color: #10b981;
    margin-left: 2px;
  }

  /* Shimmer loading */
  .shimmer {
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 0%,
      rgba(255,255,255,0.08) 50%,
      rgba(255,255,255,0.03) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  .animate-float {
    animation: float 4s ease-in-out infinite;
  }

  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 4s ease infinite;
  }

  /* ── Light mode chart / tooltip fixes ── */
  html.light .recharts-cartesian-grid line {
    stroke: rgba(15,23,42,0.07) !important;
  }
  html.light .recharts-text {
    fill: #64748b !important;
  }
}

/* ─── Custom scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
html.light ::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,0.15);
}
html.light ::-webkit-scrollbar-thumb:hover {
  background: rgba(15,23,42,0.25);
}

/* ─── Keyframes ──────────────────────────────────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}