/* Design System for Blocos Feministas - Vibrant Carnival & Feminist Colors */

:root {
  /* Base colors */
  --background: 340 15% 97%;
  --foreground: 320 25% 15%;

  /* Card colors */
  --card: 340 25% 98%;
  --card-foreground: 320 25% 15%;

  /* Popover colors */
  --popover: 340 25% 98%;
  --popover-foreground: 320 25% 15%;

  /* Primary - Vibrant magenta */
  --primary: 320 85% 55%;
  --primary-foreground: 0 0% 100%;
  --primary-glow: 320 85% 70%;

  /* Secondary - Soft purple */
  --secondary: 280 60% 85%;
  --secondary-foreground: 280 80% 25%;

  /* Muted colors */
  --muted: 320 20% 92%;
  --muted-foreground: 320 15% 45%;

  /* Accent - Golden yellow */
  --accent: 45 95% 70%;
  --accent-foreground: 45 15% 25%;

  /* Carnival colors */
  --carnival-purple: 285 85% 65%;
  --carnival-pink: 340 85% 70%;
  --carnival-gold: 45 95% 65%;
  --carnival-orange: 25 95% 65%;

  /* Status colors */
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --success: 120 85% 45%;
  --success-foreground: 0 0% 100%;

  /* UI elements */
  --border: 320 25% 88%;
  --input: 320 25% 92%;
  --ring: 320 85% 55%;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(320 85% 55%), hsl(285 85% 65%));
  --gradient-secondary: linear-gradient(135deg, hsl(340 85% 70%), hsl(45 95% 70%));
  --gradient-hero: linear-gradient(135deg, hsl(320 85% 55%), hsl(285 85% 65%), hsl(45 95% 70%));
  --gradient-card: linear-gradient(145deg, hsl(340 25% 98%), hsl(280 60% 85% / 0.3));

  /* Shadows */
  --shadow-carnival: 0 10px 30px -10px hsl(320 85% 55% / 0.3);
  --shadow-soft: 0 4px 20px -8px hsl(320 85% 55% / 0.15);
  --shadow-glow: 0 0 30px hsl(320 85% 70% / 0.4);

  /* Border Radius */
  --radius: 0.75rem;
}

.dark {
  /* Base colors - Dark carnival theme */
  --background: 320 25% 8%;
  --foreground: 320 15% 92%;

  /* Card colors */
  --card: 320 25% 12%;
  --card-foreground: 320 15% 92%;

  /* Popover */
  --popover: 320 25% 12%;
  --popover-foreground: 320 15% 92%;

  /* Primary */
  --primary: 320 85% 65%;
  --primary-foreground: 0 0% 100%;
  --primary-glow: 320 85% 75%;

  /* Secondary */
  --secondary: 280 60% 25%;
  --secondary-foreground: 280 15% 85%;

  /* Muted */
  --muted: 320 25% 18%;
  --muted-foreground: 320 15% 65%;

  /* Accent */
  --accent: 45 85% 60%;
  --accent-foreground: 45 15% 15%;

  /* Carnival colors for dark mode */
  --carnival-purple: 285 85% 70%;
  --carnival-pink: 340 85% 75%;
  --carnival-gold: 45 95% 70%;
  --carnival-orange: 25 95% 70%;

  /* Status */
  --destructive: 0 75% 55%;
  --destructive-foreground: 0 0% 100%;
  --success: 120 75% 50%;
  --success-foreground: 0 0% 100%;

  /* UI elements */
  --border: 320 25% 22%;
  --input: 320 25% 18%;
  --ring: 320 85% 65%;

  --gradient-primary: linear-gradient(135deg, hsl(320 85% 65%), hsl(285 85% 70%));
  --gradient-secondary: linear-gradient(135deg, hsl(340 85% 75%), hsl(45 95% 70%));
  --gradient-hero: linear-gradient(135deg, hsl(320 85% 65%), hsl(285 85% 70%), hsl(45 95% 70%));
  --gradient-card: linear-gradient(145deg, hsl(320 25% 12%), hsl(280 60% 25% / 0.3));
}

/* Animations */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

.animate-carnival {
  animation: carnival 4s ease-in-out infinite;
}

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

@keyframes glow {
  from { box-shadow: var(--shadow-soft); }
  to { box-shadow: var(--shadow-glow); }
}

@keyframes carnival {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.02) rotate(0.5deg); }
  50% { transform: scale(1) rotate(0deg); }
  75% { transform: scale(1.02) rotate(-0.5deg); }
}

/* Custom Gradients & Text */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-hero {
  background: var(--gradient-hero);
}

.bg-gradient-card {
  background: var(--gradient-card);
}

.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-secondary {
  background: var(--gradient-secondary);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.6);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.8);
}

/* Base Body Styles */
body {
  font-family: 'Outfit', 'Inter', sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

/* Leaflet Overrides */
.leaflet-container {
  font-family: inherit;
  border-radius: var(--radius);
  z-index: 1;
}

.leaflet-popup-content-wrapper {
  background: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-carnival) !important;
  border: 1px solid hsl(var(--border));
}

.leaflet-popup-tip {
  background: hsl(var(--card)) !important;
}

/* Custom utility classes matching original project colors */
.bg-primary { background-color: hsl(var(--primary)); }
.text-primary { color: hsl(var(--primary)); }
.border-primary { border-color: hsl(var(--primary)); }

.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }

.bg-card { background-color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }

.bg-muted { background-color: hsl(var(--muted)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }

.border-border { border-color: hsl(var(--border)); }
.border-input { border-color: hsl(var(--input)); }

/* Toast Notifications */
#toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 9999;
}

.toast {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-carnival);
  animation: slideIn 0.3s ease-out;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 250px;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Premium Border & Input Focus Refinements */
.border-border, .border-input, .border {
  border-color: hsl(var(--border) / 0.5) !important;
}

.bg-gradient-card {
  border: 1px solid hsl(var(--border) / 0.5) !important;
  box-shadow: 0 4px 20px -2px hsl(var(--primary) / 0.02) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-gradient-card:hover {
  border-color: hsl(var(--primary) / 0.25) !important;
  box-shadow: var(--shadow-soft), 0 10px 25px -5px hsl(var(--primary) / 0.05) !important;
}

input, select, textarea {
  border: 1px solid hsl(var(--border) / 0.7) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

input:focus, select:focus, textarea:focus {
  border-color: hsl(var(--primary) / 0.5) !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12) !important;
}

button, a {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth popup animations for Map */
.leaflet-popup {
  animation: fadeInPopup 0.25s ease-out;
}

@keyframes fadeInPopup {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}