globals.css

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

@layer base {
  :root {
    --background: #0B0B1E;
    --foreground: #ededed;
    --surface: #1B1B1B;
    --surface-dark: #232323;
    --border: #343434;
    --text-primary: rgba(255, 255, 255, 0.9);
    --text-secondary: rgba(255, 255, 255, 0.7);
    --accent: #9945FF;
    --success: #14F195;
  }

  body {
    font-family: 'GeistVF', sans-serif;
    background: var(--background);
    color: var(--foreground);
    margin: 0;
    padding: 0;
    min-height: 100vh;
  }
}

@layer components {
  /* Main surface containers */
  .surface {
    @apply bg-[#1B1B1B]/90 border border-[#343434]/50 rounded-xl p-6;
  }

  .surface-dark {
    @apply bg-[#232323]/50 border border-[#343434]/30 rounded-lg p-4;
  }

  /* Form elements */
  .input-base {
    @apply w-full px-4 py-3 rounded-lg bg-[#232323] 
           border border-[#343434] text-white 
           placeholder-white/40 focus:outline-none 
           focus:ring-1 focus:ring-[#9945FF]/30 
           hover:border-[#9945FF]/20 transition-all duration-200;
  }

  .button-primary {
    @apply w-full px-4 py-3 rounded-lg bg-[#9945FF] 
           hover:bg-[#8935EE] text-white font-medium 
           transition-all duration-200 disabled:opacity-50 
           disabled:cursor-not-allowed;
  }

  /* Typography */
  .heading-lg {
    @apply text-2xl font-bold text-white/90;
  }

  .heading-md {
    @apply text-xl font-semibold text-white/90;
  }

  .text-body {
    @apply text-white/70;
  }

  .text-success {
    @apply text-[#14F195];
  }

  /* Status indicators */
  .status-success {
    @apply bg-[#14F195]/10 text-[#14F195] border border-[#14F195]/20;
  }

  .status-error {
    @apply bg-red-500/10 text-red-400 border border-red-500/20;
  }

  .status-info {
    @apply bg-white/5 text-white/70 border border-white/10;
  }
}

@layer utilities {
  .hover-lift {
    @apply transition-transform duration-200 hover:-translate-y-0.5;
  }
}