@import "tailwindcss";

@theme {
  --color-background: #050508;
  --color-foreground: #ffffff;
  
  --color-primary: #00f0ff;
  --color-primary-foreground: #000000;
  
  --color-secondary: #ff0099;
  --color-secondary-foreground: #ffffff;
  
  --color-accent: #bd00ff;
  --color-accent-foreground: #ffffff;
  
  --color-card: #12121a;
  --color-card-foreground: #ffffff;
  
  --color-muted: #1f1f2e;
  --color-muted-foreground: #a1a1aa;
  
  --color-border: #2a2a35;
  
  --radius-lg: 0.75rem;
  --radius-md: 0.5rem;
  --radius-sm: 0.25rem;
  
  --animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@layer base {
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
}

@layer utilities {
  .glass {
    background-color: rgb(255 255 255 / 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 0.1);
  }
  
  .glass-card {
    background-color: rgb(26 26 36 / 0.8);
    backdrop-filter: blur(4px);
    border: 1px solid rgb(255 255 255 / 0.05);
  }
  
  .text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, var(--color-primary), var(--color-accent), var(--color-secondary));
  }
  
  .neon-shadow {
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3), 0 0 20px rgba(0, 240, 255, 0.1);
  }
  
  .neon-text {
    text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
  }
}