frontend/src/index.css

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

/* ─── Theme Variables ──────────────────────────────────────────── */

:root {
  --bg-primary: #08080d;
  --bg-secondary: #09090f;
  --bg-tertiary: #0a0a12;
  --bg-card: #0e0e16;
  --bg-input: rgba(255, 255, 255, 0.03);
  --bg-hover: rgba(255, 255, 255, 0.02);
  --bg-hover-strong: rgba(255, 255, 255, 0.05);

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: #6b7280;
  --text-dim: #4b5563;

  --border-color: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);

  --accent-violet: #8b5cf6;
  --accent-green: #22c55e;
  --accent-orange: #f97316;
  --accent-red: #ef4444;
  --accent-blue: #3b82f6;

  --background: var(--bg-primary);
  --foreground: var(--text-primary);
}

[data-theme="light"] {
  --bg-primary: #f5f6f8;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eef0f3;
  --bg-card: #ffffff;
  --bg-input: rgba(0, 0, 0, 0.04);
  --bg-hover: rgba(0, 0, 0, 0.02);
  --bg-hover-strong: rgba(0, 0, 0, 0.05);

  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-dim: #9ca3af;

  --border-color: rgba(0, 0, 0, 0.1);
  --border-hover: rgba(0, 0, 0, 0.2);

  --background: var(--bg-primary);
  --foreground: var(--text-primary);
}

/* ─── Base ─────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Theme Utility Classes ──────────────────────────────────────── */

.theme-bg-primary   { background-color: var(--bg-primary) !important; }
.theme-bg-secondary { background-color: var(--bg-secondary) !important; }
.theme-bg-tertiary  { background-color: var(--bg-tertiary) !important; }
.theme-bg-card      { background-color: var(--bg-card) !important; }
.theme-text-primary   { color: var(--text-primary) !important; }
.theme-text-secondary { color: var(--text-secondary) !important; }
.theme-text-muted     { color: var(--text-muted) !important; }
.theme-border         { border-color: var(--border-color) !important; }
.theme-border-hover   { border-color: var(--border-hover) !important; }

/* ─── Scrollbars ─────────────────────────────────────────────────── */

.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

/* ─── SQL Syntax Highlighting ───────────────────────────────────── */

.sql-keyword { color: #a78bfa; font-weight: 600; }
.sql-function { color: #60a5fa; }
.sql-string { color: #34d399; }
.sql-number { color: #f97316; }
.sql-comment { color: #6b7280; font-style: italic; }
.sql-operator { color: #e5e7eb; }

/* ─── Blinking cursor ──────────────────────────────────────────── */

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.cursor-blink {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 1px;
}

/* ─── Reward pulse animation ─────────────────────────────────────── */

@keyframes rewardPulse {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.reward-pulse {
  animation: rewardPulse 0.5s ease-out;
}

/* ─── Optimizing banner ──────────────────────────────────────────── */

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-banner {
  background: linear-gradient(
    90deg,
    rgba(139, 92, 246, 0.15) 0%,
    rgba(139, 92, 246, 0.3) 50%,
    rgba(139, 92, 246, 0.15) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

/* ─── Light Mode Global Overrides ─────────────────────────────── */

[data-theme="light"] .text-white { color: var(--text-primary) !important; }
[data-theme="light"] .text-white\/70 { color: var(--text-secondary) !important; }
[data-theme="light"] .text-gray-200 { color: #1f2937 !important; }
[data-theme="light"] .text-gray-300 { color: #374151 !important; }
[data-theme="light"] .text-gray-400 { color: #4b5563 !important; }
[data-theme="light"] .text-gray-500 { color: #6b7280 !important; }
[data-theme="light"] .text-gray-600 { color: #9ca3af !important; }
[data-theme="light"] .text-violet-300 { color: #7c3aed !important; }
[data-theme="light"] .text-violet-400 { color: #7c3aed !important; }
[data-theme="light"] .text-green-400 { color: #15803d !important; }
[data-theme="light"] .text-green-300 { color: #16a34a !important; }
[data-theme="light"] .text-red-400 { color: #b91c1c !important; }
[data-theme="light"] .text-red-300 { color: #dc2626 !important; }
[data-theme="light"] .text-orange-400 { color: #c2410c !important; }
[data-theme="light"] pre {
  background-color: var(--bg-tertiary) !important;
  color: #374151 !important;
}
[data-theme="light"] .recharts-cartesian-grid line {
  stroke: rgba(0, 0, 0, 0.06) !important;
}
/* Make borders using white opacity visible in light mode */
[data-theme="light"] [class*="border-white/"] {
  border-color: var(--border-color) !important;
}
/* Make subtle white-opacity section headers visible in light mode */
[data-theme="light"] [class*="bg-white/[0.0"] {
  background-color: rgba(0, 0, 0, 0.035) !important;
}
/* Hover states on white-opacity backgrounds */
[data-theme="light"] [class*="hover:bg-white/"]:hover {
  background-color: var(--bg-hover-strong) !important;
}