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

/* Using Google Fonts - no need for local font face declaration */

@layer base {
  :root {
    --background: 222 47% 11%;
    --foreground: 214 95% 93%;
    --primary: 252 94% 67%;
    --primary-foreground: 220 13% 91%;
    --secondary: 217 33% 17%;
    --secondary-foreground: 215 20% 85%;
    --muted: 223 47% 14%;
    --muted-foreground: 215 16% 70%;
    --accent: 217 33% 17%;
    --accent-foreground: 215 20% 85%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
    --border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 224 71% 45%;
    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-mpay-dark text-white font-sans antialiased;
  }
}

@layer components {
  .gradient-blur {
    @apply absolute w-full h-full blur-[100px] opacity-50 z-0;
  }

  .glass-card {
    @apply rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-6;
  }

  .gradient-text {
    @apply bg-mpay-gradient bg-clip-text text-transparent font-bold;
  }

  .highlight-text {
    @apply text-mpay-orange font-semibold;
  }
  
  .nav-link {
    @apply text-gray-400 hover:text-white/90 transition-colors duration-200 tracking-wide opacity-75 hover:opacity-100;
  }
  
  .button-primary {
    @apply bg-mpay-orange hover:bg-mpay-orangeDark text-white font-medium py-2 px-4 rounded-lg transition-all;
  }
  
  .button-secondary {
    @apply bg-white/10 hover:bg-white/15 text-white font-medium py-2 px-4 rounded-lg transition-all;
  }
}