@import "tailwindcss";

:root {
  --background: #0a0a0a;
  --foreground: #ededed;
  
  --primary: #6366f1; /* Indigo 500 */
  --primary-glow: rgba(99, 102, 241, 0.4);
  
  --secondary: #ec4899; /* Pink 500 */
  
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
}

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with v3.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  background-image: 
    radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.08), transparent 25%), 
    radial-gradient(circle at 85% 30%, rgba(236, 72, 153, 0.08), transparent 25%);
}

@utility glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

@utility glass-button {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  transition: all 0.3s ease;
  
  &:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 0 15px var(--primary-glow);
    color: white;
  }
}