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

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer base {
  :root {
    --background: 210 100% 99%;
    --foreground: 224 71.4% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    --primary: 220 84.2% 60.2%;
    --primary-foreground: 210 20% 98%;
    --secondary: 330 84.2% 60.2%;
    --secondary-foreground: 210 20% 98%;
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    --accent: 280 84.2% 60.2%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 20% 98%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 220 84.2% 60.2%;
    --chart-1: 195 76% 61%;
    --chart-2: 205 58% 39%;
    --chart-3: 215 37% 24%;
    --chart-4: 200 74% 66%;
    --chart-5: 190 87% 67%;
    --radius: 0.8rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    background-image: linear-gradient(135deg, hsl(330, 80%, 98%), hsl(210, 100%, 98%));
  }
}

@layer utilities {
  .bg-hero-gradient {
    background-image: linear-gradient(135deg, hsl(330, 80%, 98%), hsl(210, 100%, 98%));
  }

  .text-gradient {
    @apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
  }
}

.heart-shape {
  position: relative;
  width: 20px;
  height: 20px;
  animation: float 6s ease-in-out infinite;
}
.heart-shape:before,
.heart-shape:after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 16px;
  border-radius: 10px 10px 0 0;
  background: hsl(var(--secondary) / 0.5);
}
.heart-shape:before {
  left: 10px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart-shape:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

.bokeh-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  filter: blur(10px);
}

@keyframes heart-beat {
  0% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

.animate-heart-beat {
  animation: heart-beat 2.5s ease-in-out infinite;
}