/**
 * Gradients.css - Calista Spa Inspired Palette & Ambient Mesh Gradients
 * Derived from the Calista Spa Wellness reference image:
 * Deep Obsidian Spruce, Warm Cedar Amber, Mineral Pool Teal, Champagne Gold
 */

:root {
  /* 1. Core Calista Theme Gradients */
  --grad-primary: linear-gradient(135deg, #fff1de 0%, #f6d8b0 25%, #e5a96c 65%, #c47d48 100%);
  --grad-aurora: var(--grad-primary);

  /* Mineral Spa Pool -> Crystalline Cyan -> Deep Emerald Teal */
  --grad-secondary: linear-gradient(135deg, #38bdf8 0%, #2dd4bf 50%, #0d9488 100%);
  --grad-ocean: var(--grad-secondary);

  /* Cedar Wood -> Warm Terracotta Amber */
  --grad-sunset: linear-gradient(135deg, #fceade 0%, #e5a96c 35%, #c27a42 75%, #8f401c 100%);
  --grad-cedar: var(--grad-sunset);

  /* Dusk Fusion: Champagne Gold melting into Serene Mineral Turquoise */
  --grad-dusk: linear-gradient(135deg, #fff7ed 0%, #f6d8b0 30%, #e5a96c 55%, #2dd4bf 100%);

  /* Botanical Jade */
  --grad-emerald: linear-gradient(135deg, #34d399 0%, #10b981 50%, #0f766e 100%);

  /* 2. Text Gradients */
  /* Dark Mode: From Luminous Warm Beige to Vibrant Mineral Blue */
  --grad-text-dark: linear-gradient(135deg, #faeedb 0%, #ecd7ba 28%, #5ac2d2 70%, #38bdf8 100%);

  /* Light Mode: From Crisp Black to Radiant Coral */
  --grad-text-light: linear-gradient(135deg, #111827 0%, #232c33 30%, #e05e46 70%, #fa725c 100%);

  /* Default Active Text Gradient */
  --grad-text-hero: linear-gradient(45deg, rgba(130, 31, 155, 1) 0%, rgb(35, 44, 51) 30%, rgb(224, 70, 70) 70%, pink 100%);
  --webkit-text-fill-color: transparent;



  /* 3. Deep Obsidian Spruce Ambient Dark Mesh Background */
  --grad-dark-mesh: radial-gradient(at 85% 12%, rgba(229, 169, 108, 0.15) 0px, transparent 40%),
    radial-gradient(at 12% 80%, rgba(45, 212, 191, 0.12) 0px, transparent 40%),
    radial-gradient(at 50% 50%, rgba(21, 37, 46, 0.85) 0px, transparent 65%),
    #090e11;

  /* 4. Glassmorphic Surface & Border Gradients */
  --grad-glass-surface: linear-gradient(135deg, rgba(229, 169, 108, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  --grad-glass-border: linear-gradient(135deg, rgba(229, 169, 108, 0.35) 0%, rgba(45, 212, 191, 0.18) 50%, rgba(255, 255, 255, 0.06) 100%);
}

/* Light Theme Variable Overrides */
[data-theme="light"] {
  --grad-text-hero: var(--grad-text-light);
}

/* Background Utility Classes */
.grad-primary {
  background: var(--grad-primary);
}

.grad-secondary {
  background: var(--grad-secondary);
}

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

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

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

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

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

.bg-mesh-dark {
  background-color: #090e11;
  background-image: var(--grad-dark-mesh);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Rule 5.5 Background Palette Utilities */
.grad-pink-white {
  background: linear-gradient(45deg, white 80%, #f7cdd5 100%);
  color: black;
}

.grad-green-dark {
  background: linear-gradient(45deg, #033, black);
  color: white;
}

.grad-red-dark {
  background: linear-gradient(45deg, #3c0434, black);
  color: white;
}

.grad-purple-dark {
  background: linear-gradient(45deg, #2c1f38, black);
  color: white;
}

.grad-blue-dark {
  background: linear-gradient(45deg, #033, black);
  color: white;
}

.grad-grey-dark {
  background: linear-gradient(45deg, #033, black);
}

/* 5. Text Gradients (Hero & Brand) */
.text-gradient,
.text-gradient-primary {
  /* background: var(--grad-text-hero);*/
  background: linear-gradient(45deg, rgba(219, 146, 237, 1) 0%, rgba(80, 118, 147, 1) 30%, rgb(224, 70, 70) 70%, pink 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.text-gradient-secondary,
.text-gradient-cyan,
.text-gradient-pool {
  background: linear-gradient(135deg, #e0f2fe 0%, #38bdf8 35%, #2dd4bf 80%, #0d9488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.text-gradient-sunset,
.text-gradient-cedar {
  background: linear-gradient(135deg, #fff1e6 0%, #f6c88f 40%, #c27a42 85%, #8f401c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.text-gradient-dusk {
  background: linear-gradient(135deg, #fff8f0 0%, #f6d8b0 30%, #e5a96c 60%, #2dd4bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.text-gradient-coral {
  background: linear-gradient(135deg, #111827 0%, #232c33 30%, #e05e46 70%, #fa725c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* 6. Gradient Badges & Accents */
.badge-gradient {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  background: var(--grad-primary);
  color: #241405;
  box-shadow: 0 4px 14px rgba(229, 169, 108, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-gradient-ocean {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  background: var(--grad-secondary);
  color: #032321;
  box-shadow: 0 4px 14px rgba(45, 212, 191, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 7. Action Buttons */
.btn-gradient {
  background: var(--grad-primary);
  color: #211204;
  border: none;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 0.625rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(229, 169, 108, 0.35);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, filter 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(229, 169, 108, 0.5);
  filter: brightness(1.05);
}

.btn-gradient:active {
  transform: translateY(0);
}

.btn-gradient-ocean {
  background: var(--grad-secondary);
  color: #032120;
  border: none;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 0.625rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(45, 212, 191, 0.35);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-gradient-ocean:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(45, 212, 191, 0.5);
}