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

@layer base {
  :root {
    --space-950: #0A0A0F;
    --space-900: #12121A;
    --neon-cyan: #00F3FF;
    --neon-purple: #8A2BE2;
    --neon-amber: #FFB300;
    --brand-primary: var(--neon-amber);
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-space-950 text-slate-200 font-sans antialiased overflow-x-hidden;
  }

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

@layer components {
  .hud-panel {
    @apply relative bg-space-900/70 backdrop-blur-md border border-space-700/60 transition-all duration-300;
  }

  .hud-panel::before {
    content: '';
    @apply pointer-events-none absolute inset-0 border border-transparent transition-colors duration-300;
  }

  .hud-panel:hover::before {
    @apply border-neon-cyan/40;
  }

  .glow-btn {
    @apply relative inline-flex items-center justify-center px-5 py-2.5 font-medium tracking-wider uppercase text-sm border border-neon-cyan/60 text-neon-cyan bg-space-900/50 hover:bg-neon-cyan/10 hover:shadow-neon-cyan transition-all duration-300;
  }

  .glow-btn[data-variant="purple"] {
    @apply border-neon-purple/60 text-neon-purple hover:bg-neon-purple/10 hover:shadow-neon-purple;
  }

  .glow-btn[data-variant="amber"] {
    @apply border-neon-amber/60 text-neon-amber hover:bg-neon-amber/10 hover:shadow-[0_0_12px_rgba(255,179,0,0.35)];
  }

  .neon-input {
    @apply w-full bg-space-950/60 border border-space-700 text-slate-200 placeholder-slate-500 px-4 py-2.5 font-mono text-sm focus:outline-none focus:border-neon-cyan focus:shadow-neon-cyan transition-all duration-200;
  }

  .data-table-row {
    @apply transition-colors duration-200 hover:bg-neon-cyan/5 hover:shadow-[inset_0_0_18px_rgba(0,243,255,0.08)];
  }

  .hud-spinner {
    @apply inline-block h-6 w-6 border-2 border-space-700 border-t-neon-cyan rounded-full animate-spin;
  }

  .hud-progress {
    @apply h-2 w-full bg-space-800 overflow-hidden;
  }

  .hud-progress-bar {
    @apply h-full w-0 bg-gradient-to-r from-neon-purple to-neon-cyan shadow-neon-cyan transition-all duration-200;
  }

  .orbit-shell {
    --nav-width: 18rem;
    --radius: 11rem;
  }

  .orbit-ring {
    --ring-rotate: 0deg;
  }

  .orbit-node {
    transform:
      rotate(calc(var(--angle) * 1deg + var(--ring-rotate)))
      translateX(var(--radius))
      rotate(calc((var(--angle) * 1deg + var(--ring-rotate)) * -1));
  }

  .orbit-node.is-active .orbit-link {
    @apply text-neon-cyan border-neon-cyan/60 bg-space-900/90 shadow-neon-cyan scale-110;
  }

  .orbit-node.is-active .orbit-icon {
    @apply text-glow;
  }

  .orbit-link {
    @apply flex items-center gap-3 px-4 py-3 border border-transparent bg-space-900/60 backdrop-blur-sm text-slate-400 hover:text-neon-cyan hover:border-neon-cyan/50 transition-all duration-300;
  }

  .shadow-brand-neon {
    box-shadow: 
      0 0 10px var(--brand-primary),
      0 0 20px var(--brand-primary),
      0 0 30px var(--brand-primary),
      0 0 40px var(--brand-primary),
      inset 0 0 10px rgba(30, 58, 138, 0.2);
  }

  .border-brand-neon {
    border-color: var(--brand-primary);
  }
}

@layer utilities {
  .text-glow {
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.45);
  }

  .text-glow-purple {
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.45);
  }

  .ud-tab-btn.is-active {
    @apply bg-neon-cyan/20 border-neon-cyan/60 text-neon-cyan;
  }

  .settings-tab-btn.is-active {
    @apply bg-neon-cyan/20 border-neon-cyan/60 text-neon-cyan;
  }
}