/* Design System for Mapeamento Cultural - Solid & Professional Green Palette */

:root {
  /* Base colors */
  --background: 37 33% 96%; /* slightly lighter #F7F2EA */
  --foreground: 0 0% 15%;   /* darker text for better contrast */

  /* Card colors */
  --card: 0 0% 100%;
  --card-foreground: 0 0% 15%;

  /* Popover colors */
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 15%;

  /* Primary - Elegant Green #5B8C5A */
  --primary: 119 22% 45%;
  --primary-foreground: 0 0% 100%;
  --primary-glow: 119 22% 52%;

  /* Secondary - Soft Green #B8D8BA */
  --secondary: 123 29% 75%;
  --secondary-foreground: 119 22% 20%;

  /* Muted colors */
  --muted: 37 15% 90%;
  --muted-foreground: 0 0% 40%;

  /* Accent - Golden/Earth */
  --accent: 45 90% 65%;
  --accent-foreground: 45 15% 20%;

  /* Mulheres na Música Accent */
  --mulheres-pink: 343 51% 48%; /* #b83b5e */

  /* 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: 119 15% 85%;
  --input: 119 15% 90%;
  --ring: 119 22% 45%;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(119 22% 45%), hsl(123 29% 65%));
  --gradient-hero: linear-gradient(135deg, hsl(119 22% 45%), hsl(123 29% 55%), hsl(45 90% 65%));
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(123 29% 75% / 0.15));

  /* Shadows - matched to Carnaval Feminino */
  --shadow-carnival: 0 10px 30px -10px hsl(119 22% 45% / 0.25);
  --shadow-soft: 0 4px 20px -8px hsl(119 22% 45% / 0.15);
  --shadow-glow: 0 0 30px hsl(119 22% 52% / 0.3);

  /* Border Radius - Strictly 0.75rem to avoid capsule look */
  --radius: 0.75rem;
}

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

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

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

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

/* 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);
}

/* 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: 'Poppins', 'Inter', sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  transition: background-color 0.3s, color 0.3s;
  overflow-x: hidden;
}

/* 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; margin-top: 8px; }
  to { opacity: 1; margin-top: 0; }
}