frontend/app/globals.css

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

@layer base {
  :root {
    --bg-primary: 9 9 11;
    --bg-secondary: 17 17 19;
    --bg-tertiary: 24 24 27;
    --bg-hover: 31 31 35;
    --border: 39 39 42;
    --border-focus: 63 63 70;
    --text-primary: 250 250 250;
    --text-secondary: 161 161 170;
    --text-muted: 113 113 122;
    --text-dim: 82 82 91;
    --accent-cyan: 6 182 212;
    --accent-cyanLight: 34 211 238;
    --accent-green: 16 185 129;
    --accent-amber: 245 158 11;
    --accent-blue: 59 130 246;
    --accent-red: 239 68 68;
  }
}

@layer base {
  * { @apply border-border; }
  body {
    @apply bg-bg-primary text-text-primary antialiased;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
}

@layer utilities {
  .glass {
    @apply bg-bg-tertiary/80 backdrop-blur-xl border border-border;
  }
  .card-hover {
    @apply transition-all duration-200 hover:border-accent-cyan/30 hover:shadow-lg hover:shadow-accent-cyan/5;
  }
  .text-gradient {
    @apply bg-gradient-to-r from-accent-cyan via-accent-cyanLight to-accent-blue bg-clip-text text-transparent;
  }
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgb(var(--bg-secondary)); }
::-webkit-scrollbar-thumb { background: rgb(var(--border)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--border-focus)); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}