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

@layer base {
  :root {
    /* Main backgrounds and foregrounds */
    --background: 277 89% 89%; /* Light Lavender */
    --foreground: 0 0% 10%; /* Anthracite */

    /* Card styles */
    --card: 277 89% 89%; /* Lavender */
    --card-foreground: 0 0% 10%; /* Anthracite */

    /* Popover styles */
    --popover: 277 89% 89%; /* Light Lavender */
    --popover-foreground: 0 0% 10%; /* Anthracite */

    /* Primary colors */
    --primary: 280 93% 23%; /* Dark Purple */
    --primary-foreground: 0 0% 100%; /* White */

    /* Secondary colors */
    --secondary: 278 68% 42%; /* Purple */
    --secondary-foreground: 0 0% 100%; /* White */

    /* Muted styles */
    --muted: 0 0% 85%; /* Light Gray */
    --muted-foreground: 0 0% 35%; /* Dark Grey */

    /* Accent colors */
    --accent: 278 59% 65%; /* Lavender */
    --accent-foreground: 0 0% 10%; /* Anthracite */

    --destructive: 0 100% 30%;
    --destructive-foreground: 0 0% 100%;

    /* Border and input styles */
    --border: 278 59% 65%; /* Lavender */
    --input: 0 0% 85%; /* Light Gray */
    --ring: 278 68% 42%; /* Purple */

    /* Radius */
    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  @keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  
  .animate-marquee {
    animation: marquee linear infinite;
  }
}
