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

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* Reusable design tokens and component classes */
@layer components {
  .page-gradient {
    @apply min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white overflow-hidden;
  }

  .text-gradient {
    @apply bg-gradient-to-r from-brand-start-400 to-brand-end-400 bg-clip-text text-transparent;
  }

  .card-glass {
    @apply rounded-2xl bg-gray-900/70 backdrop-blur-xl border border-white/10;
  }

  .card-gradient-frame {
    @apply rounded-2xl p-[1px] bg-gradient-to-br from-brand-start-300/30 via-brand-start-300/10 to-brand-end-300/30 shadow-2xl shadow-black/30;
  }

  .input-field {
    @apply w-full rounded-xl border border-white/10 bg-white/10 px-11 py-3 text-white placeholder-gray-400 outline-none transition focus:border-white/30 focus:ring-2 focus:ring-cyan-500/30;
  }

  .btn-gradient {
    @apply inline-flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-brand-start-500 to-brand-end-500 px-6 py-3 text-sm font-medium text-white transition duration-300 hover:from-brand-start-600 hover:to-brand-end-600 transform hover:scale-105 hover:shadow-xl hover:shadow-cyan-500/25 disabled:opacity-50;
  }
}