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

@layer base {
  :root {
    --brand-green: #00ff88;
    --brand-blue: #00d4ff;
    --brand-purple: #a855f7;
    --surface-base: #070b14;
    --surface-card: rgba(12, 18, 32, 0.72);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.04);
  }

  html {
    @apply scroll-smooth;
  }

  body {
    @apply min-h-screen bg-mesh-gradient text-slate-100 antialiased;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
  }

  h1,
  h2,
  h3 {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    letter-spacing: -0.02em;
  }

  ::selection {
    @apply bg-neon-green/30 text-white;
  }

  :focus-visible {
    @apply outline-none ring-2 ring-neon-green/50 ring-offset-2 ring-offset-surface;
  }

  @media (prefers-reduced-motion: reduce) {
    .ambient-orb,
    .ambient-mesh,
    .btn-primary::after {
      animation: none !important;
    }
  }
}

@layer components {
  .ambient-mesh {
    background:
      radial-gradient(ellipse 80% 60% at 20% 10%, rgba(168, 85, 247, 0.12), transparent 55%),
      radial-gradient(ellipse 70% 50% at 85% 25%, rgba(0, 212, 255, 0.1), transparent 50%),
      radial-gradient(ellipse 60% 45% at 50% 90%, rgba(0, 255, 136, 0.08), transparent 55%);
    animation: meshShift 20s ease-in-out infinite alternate;
  }

  .ambient-grid {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 75%);
  }

  .glass-card {
    @apply rounded-2xl border border-white/[0.08] bg-surface-card shadow-card backdrop-blur-xl;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .glass-card-hover {
    @apply glass-card transition-all duration-300 ease-out;
  }

  .glass-card-hover:hover {
    @apply -translate-y-1 border-neon-green/25 shadow-neon;
  }

  .glass-card-blue {
    @apply glass-card transition-all duration-300 hover:-translate-y-1 hover:border-neon-blue/30 hover:shadow-neon-blue;
  }

  .gradient-text {
    @apply bg-brand-gradient bg-clip-text font-display font-bold text-transparent;
    background-size: 200% auto;
  }

  .gradient-text-animated {
    @apply gradient-text;
    animation: shimmer 4s linear infinite;
  }

  .btn-primary {
    @apply relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-xl bg-brand-gradient px-5 py-2.5 text-sm font-semibold text-surface shadow-neon transition-all duration-300;
    background-size: 200% auto;
  }

  .btn-primary::after {
    content: "";
    @apply absolute inset-0 opacity-0 transition-opacity duration-300;
    background: linear-gradient(
      105deg,
      transparent 40%,
      rgba(255, 255, 255, 0.25) 50%,
      transparent 60%
    );
    background-size: 200% 100%;
    animation: shimmer 2.8s linear infinite;
  }

  .btn-primary:hover:not(:disabled) {
    @apply scale-[1.02] shadow-glow;
    background-position: right center;
  }

  .btn-primary:hover:not(:disabled)::after {
    @apply opacity-100;
  }

  .btn-primary:active:not(:disabled) {
    @apply scale-[0.98];
  }

  .btn-primary:disabled {
    @apply cursor-not-allowed opacity-50;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-slate-300 transition-all duration-200 hover:border-white/20 hover:bg-white/10 hover:text-white active:scale-[0.98];
  }

  .btn-icon {
    @apply inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 p-2 text-slate-400 transition-all duration-200 hover:border-white/20 hover:bg-white/10 hover:text-white active:scale-95;
  }

  .input-field {
    @apply w-full rounded-xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm text-white placeholder:text-slate-500 transition-all duration-200 focus:border-neon-blue/50 focus:bg-white/[0.06] focus:outline-none focus:ring-2 focus:ring-neon-blue/20;
  }

  .select-field {
    @apply input-field appearance-none cursor-pointer;
  }

  .section-label {
    @apply mb-4 flex items-center gap-2 font-display text-xs font-semibold uppercase tracking-[0.18em] text-slate-500;
  }

  .section-label::after {
    @apply block h-px flex-1 bg-gradient-to-r from-white/10 to-transparent;
    content: "";
  }

  .stat-pill {
    @apply rounded-lg border border-white/[0.04] bg-white/[0.04] px-3 py-2 text-center transition-colors duration-200 hover:border-white/10 hover:bg-white/[0.06];
  }

  .team-avatar {
    @apply flex items-center justify-center rounded-xl font-bold text-surface;
  }

  .divider-v {
    @apply h-full w-px bg-white/5;
  }

  .chip-filter {
    @apply rounded-full px-3.5 py-1.5 text-xs font-semibold transition-all duration-200 active:scale-95;
  }

  .chip-filter-active {
    @apply bg-neon-green/15 text-neon-green ring-1 ring-neon-green/30 shadow-[0_0_16px_rgba(0,255,136,0.12)];
  }

  .chip-filter-idle {
    @apply bg-white/5 text-slate-400 hover:bg-white/[0.08] hover:text-slate-300;
  }

  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
  }

  .skip-link {
    @apply sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-xl focus:bg-neon-green focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-surface;
  }

  .nav-link {
    @apply relative overflow-hidden;
  }

  .nav-link-active {
    @apply text-white;
  }

  .nav-link-active .nav-link-icon {
    @apply text-neon-green;
  }
}