:root {
  --background: #ecfdf5; /* Tailwind bg-emerald-50 */
  --foreground: #1f2937; /* Dark gray text */
  --primary: hsl(150, 60%, 35%); /* Brand emerald green */
  --primary-foreground: #ffffff;
  --secondary: hsl(35, 95%, 55%);
  --secondary-foreground: #1f2937;
  --accent: hsl(195, 95%, 25%);
  --accent-foreground: #ffffff;
  --destructive: hsl(0, 85%, 60%);
  --destructive-foreground: #ffffff;

  --transition-smooth: all 0.3s cubic-bezier(.4, 0, .2, 1);
  --radius: 0.75rem;
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

a {
  transition: color var(--transition-smooth), background-color var(--transition-smooth);
}

/* Navbar */
.navbar {
  background-color: var(--primary) !important;
}

.navbar .nav-link,
.navbar .navbar-brand,
.navbar .nav-logo-text {
  color: var(--primary-foreground) !important; /* white text */
  transition: color var(--transition-smooth), background-color var(--transition-smooth);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--primary-foreground) !important;
}

.navbar .nav-link.text-danger {
  color: hsl(0, 85%, 85%) !important; /* lighter red for contrast */
}

/* Buttons */
.btn {
  border-radius: var(--radius);
  transition: var(--transition-smooth);
}
.btn-primary {
  background-color: var(--primary);
  border: none;
  color: var(--primary-foreground);
}
.btn-primary:hover {
  background-color: hsl(150, 60%, 30%);
}

/* Spinner inside buttons */
button.loading {
  position: relative;
  pointer-events: none;
}
button.loading .spinner-border {
  margin-left: 0.5rem;
  vertical-align: middle;
}