/* Secondary Color System - Blue-Purple-Blue Gradient */

/* 
 * Secondary gradient colors for consistent branding
 * Used for: Visit buttons, Boost Deal buttons, secondary CTAs
 * Matches the "Share your active properties" heading gradient
 */

:root {
  /* Primary green gradient color variables (standard Tailwind greens) */
  --primary-green-start: #4ADE80;    /* green-400 */
  --primary-green-end: #16A34A;      /* green-600 */
  --primary-green-start-hover: #22C55E;  /* green-500 */
  --primary-green-end-hover: #15803D;    /* green-700 */
  
  /* Secondary gradient color variables - Blue to Purple to Blue (matching "Share your active properties") */
  --secondary-start: #2563EB;    /* blue-600 */
  --secondary-middle: #9333EA;   /* purple-600 */
  --secondary-end: #1E3A8A;      /* blue-800 */
  
  /* Hover states */
  --secondary-start-hover: #1D4ED8;    /* blue-700 */
  --secondary-middle-hover: #7C3AED;   /* purple-700 */
  --secondary-end-hover: #1E40AF;      /* blue-900 */
}

/* Utility classes for primary green gradient */
.bg-primary-gradient {
  background: linear-gradient(to right, var(--primary-green-start), var(--primary-green-end));
}

.btn-primary-gradient {
  background: linear-gradient(to right, var(--primary-green-start), var(--primary-green-end));
  transition: all 0.3s ease;
}

.btn-primary-gradient:hover {
  background: linear-gradient(to right, var(--primary-green-start-hover), var(--primary-green-end-hover));
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(74, 222, 128, 0.3);
}

/* Utility classes for secondary gradient */
.bg-secondary-gradient {
  background: linear-gradient(to right, var(--secondary-start), var(--secondary-middle), var(--secondary-end));
}

.bg-secondary-gradient-hover:hover {
  background: linear-gradient(to right, var(--secondary-start-hover), var(--secondary-middle-hover), var(--secondary-end-hover));
}

/* Text gradient for headings */
.text-secondary-gradient {
  background: linear-gradient(to right, var(--secondary-start), var(--secondary-middle), var(--secondary-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Button utility class combining gradient and hover */
.btn-secondary-gradient {
  background: linear-gradient(to right, var(--secondary-start), var(--secondary-middle), var(--secondary-end));
  transition: all 0.3s ease;
}

.btn-secondary-gradient:hover {
  background: linear-gradient(to right, var(--secondary-start-hover), var(--secondary-middle-hover), var(--secondary-end-hover));
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
}

/* Usage Examples:
 * 
 * Primary Green:
 * - btn-primary-gradient
 * - Or Tailwind: bg-gradient-to-r from-green-medium to-green-darkest
 * 
 * Secondary Blue-Purple:
 * - bg-gradient-to-r from-secondary-start via-secondary-middle to-secondary-end
 * - hover:from-secondary-start-hover hover:via-secondary-middle-hover hover:to-secondary-end-hover
 * - btn-secondary-gradient
 * - text-secondary-gradient
 */