@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;

  --color-void: #030307;
  --color-surface: #0c0e14;
  --color-surface-2: #12151f;
  --color-surface-3: #1a1e2c;
  --color-border: rgba(34, 211, 238, 0.12);
  --color-cyan-neon: #22d3ee;
  --color-purple-neon: #c084fc;
  --color-purple-deep: #6d28d9;
  --color-muted: #8b909e;
}

html {
  scroll-behavior: smooth;
}

body {
  @apply bg-void text-zinc-100 antialiased font-sans;
  background-image:
    radial-gradient(ellipse 140% 80% at 10% -20%, rgba(109, 40, 217, 0.22), transparent),
    radial-gradient(ellipse 100% 60% at 90% 0%, rgba(34, 211, 238, 0.12), transparent),
    linear-gradient(#030307, #030307);
  min-height: 100vh;
}

.glass-panel {
  @apply bg-surface-2/85 border border-cyan-neon/10 backdrop-blur-md shadow-[0_0_40px_rgba(162,132,246,0.08)];
}

.glow-text {
  text-shadow:
    0 0 20px rgba(34, 211, 238, 0.45),
    0 0 48px rgba(192, 132, 252, 0.35);
}

.btn-primary {
  @apply rounded-xl px-5 py-2.5 font-medium text-zinc-950 transition;
  background: linear-gradient(120deg, #22d3ee, #c084fc 55%, #7c3aed);
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.25), 0 0 42px rgba(192, 132, 252, 0.2);
}

.btn-primary:hover {
  @apply brightness-110;
}

.btn-ghost {
  @apply rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-zinc-200 transition hover:border-cyan-neon/40 hover:bg-white/10;
}

.input-field {
  @apply w-full rounded-xl border border-white/10 bg-surface px-4 py-2.5 text-sm text-zinc-100 outline-none placeholder:text-muted focus:border-cyan-neon/50 focus:ring-1 focus:ring-cyan-neon/40;
}