@import "tw-animate-css";
@import "shadcn/tailwind.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: oklch(0.08 0 0);
    --foreground: oklch(0.97 0 0);
    --card: oklch(0.12 0 0);
    --card-foreground: oklch(0.97 0 0);
    --popover: oklch(0.12 0 0);
    --popover-foreground: oklch(0.97 0 0);
    --primary: oklch(0.55 0.24 293);
    --primary-foreground: oklch(0.97 0 0);
    --secondary: oklch(0.17 0 0);
    --secondary-foreground: oklch(0.97 0 0);
    --muted: oklch(0.17 0 0);
    --muted-foreground: oklch(0.60 0 0);
    --accent: oklch(0.65 0.19 200);
    --accent-foreground: oklch(0.08 0 0);
    --destructive: oklch(0.60 0.22 27);
    --border: oklch(1 0 0 / 12%);
    --input: oklch(1 0 0 / 12%);
    --ring: oklch(0.55 0.24 293);
    --radius: 0.75rem;
    --chart-1: oklch(0.55 0.24 293);
    --chart-2: oklch(0.65 0.19 200);
    --chart-3: oklch(0.65 0.18 142);
    --chart-4: oklch(0.75 0.18 85);
    --chart-5: oklch(0.60 0.22 27);
    --sidebar: oklch(0.10 0 0);
    --sidebar-foreground: oklch(0.97 0 0);
    --sidebar-primary: oklch(0.55 0.24 293);
    --sidebar-primary-foreground: oklch(0.97 0 0);
    --sidebar-accent: oklch(0.17 0 0);
    --sidebar-accent-foreground: oklch(0.97 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.55 0.24 293);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  html {
    scroll-behavior: smooth;
  }
}

@layer utilities {
  .gradient-text {
    background: linear-gradient(135deg, #a78bfa, #818cf8, #67e8f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .gradient-text-hero {
    background: linear-gradient(135deg, #c4b5fd 0%, #f0abfc 40%, #67e8f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .glass-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
  }

  .glass-card-hover {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    transition: all 0.3s ease;
  }

  .glass-card-hover:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(167, 139, 250, 0.3);
    transform: translateY(-2px);
  }

  .glow-violet {
    box-shadow: 0 0 40px rgba(124, 58, 237, 0.25), 0 0 80px rgba(124, 58, 237, 0.1);
  }

  .glow-cyan {
    box-shadow: 0 0 40px rgba(6, 182, 212, 0.25), 0 0 80px rgba(6, 182, 212, 0.1);
  }

  .bg-grid {
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
  }

  .bg-radial-violet {
    background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
  }

  .gradient-border {
    position: relative;
    background: linear-gradient(oklch(0.12 0 0), oklch(0.12 0 0)) padding-box,
                linear-gradient(135deg, rgba(124, 58, 237, 0.6), rgba(6, 182, 212, 0.6)) border-box;
    border: 1px solid transparent;
  }

  .text-balance {
    text-wrap: balance;
  }
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.7); }