/* ============================================
   PoolReady Tampa Bay - Variation Color Schemes
   Consistent PoolReady Branding Across All Pages
   Primary: Pool Blue (#0891b2) - Clean, Clear Pool Water
   ============================================ */

/* ============================================
   SHARED BRAND COLORS (Used by all variations)
   ============================================ */
:root {
  /* PoolReady Brand Blue - represents crystal clear pool water */
  --poolready-blue: #0891b2;
  --poolready-blue-light: #06b6d4;
  --poolready-blue-dark: #0e7490;
  --poolready-blue-rgb: 8, 145, 178;

  /* PoolReady Secondary - clean white/light backgrounds */
  --poolready-white: #ffffff;
  --poolready-light: #f0f9ff;
  --poolready-gray: #f1f5f9;
}

/* ============================================
   VARIATION 1: "The Reliability King"
   Pool Blue + Green checkmark (trust, reliability)
   Clean, professional feel
   ============================================ */
.variation-reliability {
  --color-primary: var(--poolready-blue);
  --color-primary-light: var(--poolready-blue-light);
  --color-primary-dark: var(--poolready-blue-dark);
  --color-primary-rgb: var(--poolready-blue-rgb);
  --color-accent: #22c55e;
  --color-accent-light: #4ade80;
  --color-accent-rgb: 34, 197, 94;
  --color-background: #f8fafc;
  --color-background-alt: #f1f5f9;
}

.variation-reliability .hero {
  background: linear-gradient(180deg, var(--poolready-light) 0%, #ffffff 100%);
}

.variation-reliability .hero-headline {
  color: var(--poolready-blue-dark);
}

.variation-reliability .checklist-item svg {
  color: var(--color-accent);
}

/* ============================================
   VARIATION 2: "The Friendly Neighbor"
   Pool Blue + Warm Orange (friendly, community)
   Rounded corners, welcoming feel
   ============================================ */
.variation-neighbor {
  --color-primary: var(--poolready-blue);
  --color-primary-light: var(--poolready-blue-light);
  --color-primary-dark: var(--poolready-blue-dark);
  --color-primary-rgb: var(--poolready-blue-rgb);
  --color-accent: #f97316;
  --color-accent-light: #fb923c;
  --color-accent-rgb: 249, 115, 22;
  --color-background: #fefdfb;
  --color-background-alt: #fff7ed;
}

.variation-neighbor .card {
  border-radius: var(--radius-2xl);
}

.variation-neighbor .btn {
  border-radius: var(--radius-full);
}

.variation-neighbor .form-container {
  border-radius: var(--radius-2xl);
}

.variation-neighbor .hero {
  background: linear-gradient(180deg, #fefdfb 0%, #ffffff 100%);
}

.variation-neighbor .hero-headline {
  color: var(--poolready-blue-dark);
}

/* ============================================
   VARIATION 3: "The Premium Experience"
   Pool Blue + Gold (luxury, premium)
   Elegant, refined aesthetic
   ============================================ */
.variation-premium {
  --color-primary: var(--poolready-blue-dark);
  --color-primary-light: var(--poolready-blue);
  --color-primary-dark: #164e63;
  --color-primary-rgb: 14, 116, 144;
  --color-accent: #d4af37;
  --color-accent-light: #e0c35a;
  --color-accent-rgb: 212, 175, 55;
  --color-background: #ffffff;
  --color-background-alt: #f8fafc;
}

.variation-premium {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, serif;
}

.variation-premium h1,
.variation-premium h2,
.variation-premium .hero-headline {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.02em;
  color: var(--poolready-blue-dark);
}

.variation-premium .hero {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.variation-premium .btn-primary {
  background: var(--poolready-blue);
  color: white;
}

.variation-premium .btn-primary:hover {
  background: var(--poolready-blue-dark);
}

.variation-premium .trust-badge-icon {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  color: var(--color-primary);
}

/* Premium tier cards */
.variation-premium .pricing-tier {
  border: 1px solid #e5e7eb;
  padding: var(--space-8);
}

.variation-premium .pricing-tier.featured {
  border: 2px solid var(--color-accent);
  position: relative;
}

.variation-premium .pricing-tier.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-primary);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

/* ============================================
   VARIATION 4: "The Time Liberator"
   Pool Blue + Sunny Yellow (lifestyle, freedom)
   Light, airy, relaxing feel
   ============================================ */
.variation-freedom {
  --color-primary: var(--poolready-blue);
  --color-primary-light: var(--poolready-blue-light);
  --color-primary-dark: var(--poolready-blue-dark);
  --color-primary-rgb: var(--poolready-blue-rgb);
  --color-accent: #eab308;
  --color-accent-light: #facc15;
  --color-accent-rgb: 234, 179, 8;
  --color-background: var(--poolready-light);
  --color-background-alt: #e0f2fe;
}

.variation-freedom .hero {
  background: linear-gradient(180deg, var(--poolready-light) 0%, #ffffff 100%);
}

.variation-freedom .hero-headline {
  color: var(--poolready-blue-dark);
}

/* Time savings callout */
.variation-freedom .time-saved {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: #78350f;
  border-radius: var(--radius-full);
  font-weight: var(--font-bold);
}

.variation-freedom .time-calculator {
  background: var(--color-background);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

/* ============================================
   VARIATION 5: "The Value Champion"
   Pool Blue + Orange (value, transparency)
   Clean, straightforward, honest feel
   ============================================ */
.variation-value {
  --color-primary: var(--poolready-blue);
  --color-primary-light: var(--poolready-blue-light);
  --color-primary-dark: var(--poolready-blue-dark);
  --color-primary-rgb: var(--poolready-blue-rgb);
  --color-accent: #ea580c;
  --color-accent-light: #f97316;
  --color-accent-rgb: 234, 88, 12;
  --color-background: var(--poolready-light);
  --color-background-alt: #e0f2fe;
}

.variation-value .hero {
  background: linear-gradient(180deg, #ffffff 0%, var(--poolready-light) 100%);
}

.variation-value .hero-headline {
  color: var(--poolready-blue-dark);
}

/* Pricing table specific to value variation */
.variation-value .pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
}

.variation-value .pricing-table th,
.variation-value .pricing-table td {
  padding: var(--space-4);
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.variation-value .pricing-table th {
  background: var(--color-background);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
}

.variation-value .pricing-table .price {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

/* Transparency badge */
.variation-value .transparency-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-background);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
}

/* ============================================
   SHARED VARIATION ENHANCEMENTS
   ============================================ */

/* Gradient text effect */
.gradient-text {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Accent backgrounds */
.bg-accent-light {
  background: rgba(var(--color-accent-rgb), 0.1);
}

.bg-primary-light {
  background: rgba(var(--color-primary-rgb), 0.1);
}

/* PoolReady brand background */
.bg-poolready {
  background: var(--poolready-light);
}

.bg-poolready-blue {
  background: var(--poolready-blue);
}

/* Border accent */
.border-accent {
  border-color: var(--color-accent);
}

.border-primary {
  border-color: var(--color-primary);
}

.border-poolready {
  border-color: var(--poolready-blue);
}

/* Text colors */
.text-primary {
  color: var(--color-primary);
}

.text-accent {
  color: var(--color-accent);
}

.text-poolready {
  color: var(--poolready-blue);
}

.text-poolready-dark {
  color: var(--poolready-blue-dark);
}