/* =========================================================================
   AIDS ve CYBH Derneği — Marka Renk ve Tema Sistemi
   Renkler kurum logosundan alınmıştır: çelik mavi (--color-primary) ve
   pembe/gül kırmızısı (--color-secondary). Bu dosya, statik olarak
   derlenmiş Tailwind çıktısını (styles.css) marka renklerine göre override
   eder; bu yüzden aşağıdaki kurallarda !important kullanılır.
   ========================================================================= */
:root {
  /* Primary Colors - Çelik mavi tonları (Ana marka rengi - logo) */
  --color-primary: #5880A0;
  --color-primary-dark: #3E5A70;
  --color-primary-light: #8AA6BC;
  --color-primary-50:  #F7F9FA;
  --color-primary-75:  #EEF2F6;
  --color-primary-100: #EBF0F4;
  --color-primary-200: #D0DBE4;
  --color-primary-300: #B4C6D4;
  --color-primary-400: #8AA6BC;
  --color-primary-500: #5880A0;
  --color-primary-600: #496D88;
  --color-primary-700: #3E5A70;
  --color-primary-800: #304658;
  --color-primary-900: #233340;

  /* Secondary Colors - Gül/pembe tonları (İkincil marka rengi - logo) */
  --color-secondary: #E25870;
  --color-secondary-dark: #9E3E4E;
  --color-secondary-light: #EB8A9B;
  --color-secondary-50:  #FEF7F8;
  --color-secondary-75:  #FCEEF1;
  --color-secondary-100: #FCEBEE;
  --color-secondary-200: #F7D0D7;
  --color-secondary-300: #F2B4BF;
  --color-secondary-400: #EB8A9B;
  --color-secondary-500: #E25870;
  --color-secondary-600: #C04B5F;
  --color-secondary-700: #9E3E4E;
  --color-secondary-800: #7C303E;
  --color-secondary-900: #5A232D;

  /* Beige/Nötr Tonları - Yumuşak kart/bölüm arkaplanları (mavi ile uyumlu) */
  --color-beige-50: #F8FBFD;
  --color-beige-100: #EEF3F7;
  --color-beige-200: #E1EAF0;
  --color-beige-300: #C9D8E2;
  --color-beige-400: #A9BFCE;
  --color-beige-500: #8AA4B8;

  /* Background Colors - Turuncu tonları (Cluster marker'lar) */
  --color-orange-50: #FFF7ED;
  --color-orange-100: #FFEDD5;
  --color-orange-200: #FED7AA;
  --color-orange-300: #FDBA74;
  --color-orange-400: #FB923C;
  --color-orange-500: #F97316;
  --color-orange-600: #EA580C;
  --color-orange-700: #C2410C;

  /* Accent Colors - Logo grisi (metin/aksan) */
  --color-gold: #58595B;
  --color-gold-light: #7A7B7D;
  --color-gold-dark: #3F4042;

  /* Helper Colors */
  --color-success: #1ECA71;
  --color-error: #FF3827;
  --color-warning: #FFA500;
  --color-info: #3B82F6;

  /* App Background */
  --color-app-bg: #fff;

  /* Text Colors - Logo'daki nötr gri tonu */
  --color-text-primary: #333A40;
  --color-text-secondary: #58595B;
  --color-text-light: #8A9096;

  /* Swiper theme color */
  --swiper-theme-color: var(--color-primary);
  --ss-primary-color: var(--color-primary);
  --primary-color: var(--color-primary);
}

/* =========================================================================
   Tam Renk Skalası (50-900) - primary & secondary
   Şablonlarda ileride kullanılabilecek tüm tonların güvenceye alınması için.
   ========================================================================= */

.bg-primary-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 250 / var(--tw-bg-opacity)) !important;
}

.text-primary-50 {
  --tw-text-opacity: 1;
  color: rgb(247 249 250 / var(--tw-text-opacity)) !important;
}

.border-primary-50 {
  --tw-border-opacity: 1;
  border-color: rgb(247 249 250 / var(--tw-border-opacity)) !important;
}

.bg-primary-75 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 246 / var(--tw-bg-opacity)) !important;
}

.text-primary-75 {
  --tw-text-opacity: 1;
  color: rgb(238 242 246 / var(--tw-text-opacity)) !important;
}

.border-primary-75 {
  --tw-border-opacity: 1;
  border-color: rgb(238 242 246 / var(--tw-border-opacity)) !important;
}

.bg-primary-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(235 240 244 / var(--tw-bg-opacity)) !important;
}

.text-primary-100 {
  --tw-text-opacity: 1;
  color: rgb(235 240 244 / var(--tw-text-opacity)) !important;
}

.border-primary-100 {
  --tw-border-opacity: 1;
  border-color: rgb(235 240 244 / var(--tw-border-opacity)) !important;
}

.bg-primary-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(208 219 228 / var(--tw-bg-opacity)) !important;
}

.text-primary-200 {
  --tw-text-opacity: 1;
  color: rgb(208 219 228 / var(--tw-text-opacity)) !important;
}

.border-primary-200 {
  --tw-border-opacity: 1;
  border-color: rgb(208 219 228 / var(--tw-border-opacity)) !important;
}

.bg-primary-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(180 198 212 / var(--tw-bg-opacity)) !important;
}

.text-primary-300 {
  --tw-text-opacity: 1;
  color: rgb(180 198 212 / var(--tw-text-opacity)) !important;
}

.border-primary-300 {
  --tw-border-opacity: 1;
  border-color: rgb(180 198 212 / var(--tw-border-opacity)) !important;
}

.bg-primary-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(138 166 188 / var(--tw-bg-opacity)) !important;
}

.text-primary-400 {
  --tw-text-opacity: 1;
  color: rgb(138 166 188 / var(--tw-text-opacity)) !important;
}

.border-primary-400 {
  --tw-border-opacity: 1;
  border-color: rgb(138 166 188 / var(--tw-border-opacity)) !important;
}

.bg-primary-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(88 128 160 / var(--tw-bg-opacity)) !important;
}

.text-primary-500 {
  --tw-text-opacity: 1;
  color: rgb(88 128 160 / var(--tw-text-opacity)) !important;
}

.border-primary-500 {
  --tw-border-opacity: 1;
  border-color: rgb(88 128 160 / var(--tw-border-opacity)) !important;
}

.bg-primary-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(73 109 136 / var(--tw-bg-opacity)) !important;
}

.text-primary-600 {
  --tw-text-opacity: 1;
  color: rgb(73 109 136 / var(--tw-text-opacity)) !important;
}

.border-primary-600 {
  --tw-border-opacity: 1;
  border-color: rgb(73 109 136 / var(--tw-border-opacity)) !important;
}

.bg-primary-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(62 90 112 / var(--tw-bg-opacity)) !important;
}

.text-primary-700 {
  --tw-text-opacity: 1;
  color: rgb(62 90 112 / var(--tw-text-opacity)) !important;
}

.border-primary-700 {
  --tw-border-opacity: 1;
  border-color: rgb(62 90 112 / var(--tw-border-opacity)) !important;
}

.bg-primary-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(48 70 88 / var(--tw-bg-opacity)) !important;
}

.text-primary-800 {
  --tw-text-opacity: 1;
  color: rgb(48 70 88 / var(--tw-text-opacity)) !important;
}

.border-primary-800 {
  --tw-border-opacity: 1;
  border-color: rgb(48 70 88 / var(--tw-border-opacity)) !important;
}

.bg-primary-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(35 51 64 / var(--tw-bg-opacity)) !important;
}

.text-primary-900 {
  --tw-text-opacity: 1;
  color: rgb(35 51 64 / var(--tw-text-opacity)) !important;
}

.border-primary-900 {
  --tw-border-opacity: 1;
  border-color: rgb(35 51 64 / var(--tw-border-opacity)) !important;
}

.bg-secondary-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 247 248 / var(--tw-bg-opacity)) !important;
}

.text-secondary-50 {
  --tw-text-opacity: 1;
  color: rgb(254 247 248 / var(--tw-text-opacity)) !important;
}

.border-secondary-50 {
  --tw-border-opacity: 1;
  border-color: rgb(254 247 248 / var(--tw-border-opacity)) !important;
}

.bg-secondary-75 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 238 241 / var(--tw-bg-opacity)) !important;
}

.text-secondary-75 {
  --tw-text-opacity: 1;
  color: rgb(252 238 241 / var(--tw-text-opacity)) !important;
}

.border-secondary-75 {
  --tw-border-opacity: 1;
  border-color: rgb(252 238 241 / var(--tw-border-opacity)) !important;
}

.bg-secondary-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 235 238 / var(--tw-bg-opacity)) !important;
}

.text-secondary-100 {
  --tw-text-opacity: 1;
  color: rgb(252 235 238 / var(--tw-text-opacity)) !important;
}

.border-secondary-100 {
  --tw-border-opacity: 1;
  border-color: rgb(252 235 238 / var(--tw-border-opacity)) !important;
}

.bg-secondary-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(247 208 215 / var(--tw-bg-opacity)) !important;
}

.text-secondary-200 {
  --tw-text-opacity: 1;
  color: rgb(247 208 215 / var(--tw-text-opacity)) !important;
}

.border-secondary-200 {
  --tw-border-opacity: 1;
  border-color: rgb(247 208 215 / var(--tw-border-opacity)) !important;
}

.bg-secondary-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(242 180 191 / var(--tw-bg-opacity)) !important;
}

.text-secondary-300 {
  --tw-text-opacity: 1;
  color: rgb(242 180 191 / var(--tw-text-opacity)) !important;
}

.border-secondary-300 {
  --tw-border-opacity: 1;
  border-color: rgb(242 180 191 / var(--tw-border-opacity)) !important;
}

.bg-secondary-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(235 138 155 / var(--tw-bg-opacity)) !important;
}

.text-secondary-400 {
  --tw-text-opacity: 1;
  color: rgb(235 138 155 / var(--tw-text-opacity)) !important;
}

.border-secondary-400 {
  --tw-border-opacity: 1;
  border-color: rgb(235 138 155 / var(--tw-border-opacity)) !important;
}

.bg-secondary-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 88 112 / var(--tw-bg-opacity)) !important;
}

.text-secondary-500 {
  --tw-text-opacity: 1;
  color: rgb(226 88 112 / var(--tw-text-opacity)) !important;
}

.border-secondary-500 {
  --tw-border-opacity: 1;
  border-color: rgb(226 88 112 / var(--tw-border-opacity)) !important;
}

.bg-secondary-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(192 75 95 / var(--tw-bg-opacity)) !important;
}

.text-secondary-600 {
  --tw-text-opacity: 1;
  color: rgb(192 75 95 / var(--tw-text-opacity)) !important;
}

.border-secondary-600 {
  --tw-border-opacity: 1;
  border-color: rgb(192 75 95 / var(--tw-border-opacity)) !important;
}

.bg-secondary-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(158 62 78 / var(--tw-bg-opacity)) !important;
}

.text-secondary-700 {
  --tw-text-opacity: 1;
  color: rgb(158 62 78 / var(--tw-text-opacity)) !important;
}

.border-secondary-700 {
  --tw-border-opacity: 1;
  border-color: rgb(158 62 78 / var(--tw-border-opacity)) !important;
}

.bg-secondary-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(124 48 62 / var(--tw-bg-opacity)) !important;
}

.text-secondary-800 {
  --tw-text-opacity: 1;
  color: rgb(124 48 62 / var(--tw-text-opacity)) !important;
}

.border-secondary-800 {
  --tw-border-opacity: 1;
  border-color: rgb(124 48 62 / var(--tw-border-opacity)) !important;
}

.bg-secondary-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(90 35 45 / var(--tw-bg-opacity)) !important;
}

.text-secondary-900 {
  --tw-text-opacity: 1;
  color: rgb(90 35 45 / var(--tw-text-opacity)) !important;
}

.border-secondary-900 {
  --tw-border-opacity: 1;
  border-color: rgb(90 35 45 / var(--tw-border-opacity)) !important;
}

/* Body background */
body {
  background-color: var(--color-app-bg);
}

/* Typography - Dernek kimliğine uygun temiz, okunabilir font çifti */
body {
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Poppins', sans-serif !important;
  color: rgb(51 58 64) !important;
}

/* Primary button styles */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px 0 rgba(73, 109, 136, 0.39);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-800) 100%);
  transform: translateY(-2px);
}

.btn-primary.outlined {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: none;
}

.btn-primary.outlined:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark)) !important;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, var(--color-secondary-dark), var(--color-secondary)) !important;
}

/* Gold accent color (logo grisi) */
.text-gold {
  color: var(--color-gold) !important;
}

.bg-gold {
  background-color: var(--color-gold) !important;
}

/* Secondary/Beige colors */
.bg-primary-75 {
  background-color: var(--color-beige-100) !important;
}

.bg-secondary-beige {
  background-color: var(--color-beige-100) !important;
}

/* Helper colors */
.text-success {
  color: var(--color-success) !important;
}

.text-error {
  color: var(--color-error) !important;
}

.bg-success {
  background-color: var(--color-success) !important;
}

.bg-error {
  background-color: var(--color-error) !important;
}

/* Opacity for decorative elements */
.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-50 {
  opacity: 0.5;
}

.group-hover\:opacity-100:hover {
  opacity: 1;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-30 {
  opacity: 0.3;
}

.group:hover .group-hover\:opacity-70 {
  opacity: 0.7;
}

/* =========================================================================
   Aşağıdaki kurallar, sitede kullanılan primary/secondary Tailwind
   sınıflarının derlenmiş styles.css içinde eksik/eski (kahverengi, amber,
   slate) kalan karşılıklarını marka renklerine göre günceller.
   ========================================================================= */

.bg-primary-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(180 198 212 / var(--tw-bg-opacity)) !important;
}

.bg-primary-300\/10 {
  background-color: rgb(180 198 212 / 0.1) !important;
}

.bg-primary-300\/15 {
  background-color: rgb(180 198 212 / 0.15) !important;
}

.bg-primary-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(138 166 188 / var(--tw-bg-opacity)) !important;
}

.bg-primary-400\/10 {
  background-color: rgb(138 166 188 / 0.1) !important;
}

.bg-primary-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 250 / var(--tw-bg-opacity)) !important;
}

.bg-primary-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(88 128 160 / var(--tw-bg-opacity)) !important;
}

.bg-primary-200\/20 {
  background-color: rgb(208 219 228 / 0.2) !important;
}

.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(226 88 112 / var(--tw-bg-opacity)) !important;
}

.bg-secondary\/10 {
  background-color: rgb(226 88 112 / 0.1) !important;
}

.bg-secondary\/20 {
  background-color: rgb(226 88 112 / 0.2) !important;
}

.text-primary-300 {
  --tw-text-opacity: 1;
  color: rgb(180 198 212 / var(--tw-text-opacity)) !important;
}

.text-primary-400 {
  --tw-text-opacity: 1;
  color: rgb(138 166 188 / var(--tw-text-opacity)) !important;
}

.text-primary-500 {
  --tw-text-opacity: 1;
  color: rgb(88 128 160 / var(--tw-text-opacity)) !important;
}

.text-primary-600 {
  --tw-text-opacity: 1;
  color: rgb(73 109 136 / var(--tw-text-opacity)) !important;
}

.text-secondary-900 {
  --tw-text-opacity: 1;
  color: rgb(90 35 45 / var(--tw-text-opacity)) !important;
}

.text-secondary {
  --tw-text-opacity: 1;
  color: rgb(226 88 112 / var(--tw-text-opacity)) !important;
}

.border-primary-100\/40 {
  border-color: rgb(235 240 244 / 0.4) !important;
}

.border-primary-100\/50 {
  border-color: rgb(235 240 244 / 0.5) !important;
}

.border-primary-200 {
  --tw-border-opacity: 1;
  border-color: rgb(208 219 228 / var(--tw-border-opacity)) !important;
}

.border-primary-200\/50 {
  border-color: rgb(208 219 228 / 0.5) !important;
}

.border-primary-300 {
  --tw-border-opacity: 1;
  border-color: rgb(180 198 212 / var(--tw-border-opacity)) !important;
}

.border-primary-400 {
  --tw-border-opacity: 1;
  border-color: rgb(138 166 188 / var(--tw-border-opacity)) !important;
}

.border-primary-500 {
  --tw-border-opacity: 1;
  border-color: rgb(88 128 160 / var(--tw-border-opacity)) !important;
}

.border-primary-600 {
  --tw-border-opacity: 1;
  border-color: rgb(73 109 136 / var(--tw-border-opacity)) !important;
}

.border-secondary-100\/40 {
  border-color: rgb(252 235 238 / 0.4) !important;
}

.border-secondary-300 {
  --tw-border-opacity: 1;
  border-color: rgb(242 180 191 / var(--tw-border-opacity)) !important;
}

.border-secondary-500 {
  --tw-border-opacity: 1;
  border-color: rgb(226 88 112 / var(--tw-border-opacity)) !important;
}

/* ===== GRADIENT STOPS (from / via / to) ===== */

.from-primary-300 {
  --tw-gradient-from: rgb(180 198 212) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(180 198 212 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-300\/20 {
  --tw-gradient-from: rgb(180 198 212 / 0.20) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(180 198 212 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-300\/40 {
  --tw-gradient-from: rgb(180 198 212 / 0.40) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(180 198 212 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-400 {
  --tw-gradient-from: rgb(138 166 188) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(138 166 188 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-400\/0 {
  --tw-gradient-from: rgb(138 166 188 / 0.00) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(138 166 188 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-400\/10 {
  --tw-gradient-from: rgb(138 166 188 / 0.10) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(138 166 188 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-400\/20 {
  --tw-gradient-from: rgb(138 166 188 / 0.20) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(138 166 188 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-50 {
  --tw-gradient-from: rgb(247 249 250) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(247 249 250 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-50\/50 {
  --tw-gradient-from: rgb(247 249 250 / 0.50) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(247 249 250 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-50\/60 {
  --tw-gradient-from: rgb(247 249 250 / 0.60) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(247 249 250 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-50\/80 {
  --tw-gradient-from: rgb(247 249 250 / 0.80) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(247 249 250 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-500 {
  --tw-gradient-from: rgb(88 128 160) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(88 128 160 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-500\/30 {
  --tw-gradient-from: rgb(88 128 160 / 0.30) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(88 128 160 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-500\/40 {
  --tw-gradient-from: rgb(88 128 160 / 0.40) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(88 128 160 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-75\/50 {
  --tw-gradient-from: rgb(238 242 246 / 0.50) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(238 242 246 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-secondary {
  --tw-gradient-from: rgb(226 88 112) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(226 88 112 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-secondary\/10 {
  --tw-gradient-from: rgb(226 88 112 / 0.10) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(226 88 112 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-secondary\/15 {
  --tw-gradient-from: rgb(226 88 112 / 0.15) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(226 88 112 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-secondary\/30 {
  --tw-gradient-from: rgb(226 88 112 / 0.30) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(226 88 112 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-secondary-400 {
  --tw-gradient-from: rgb(235 138 155) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(235 138 155 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-secondary-50 {
  --tw-gradient-from: rgb(254 247 248) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(254 247 248 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-primary-300 {
  --tw-gradient-via: rgb(180 198 212) var(--tw-gradient-via-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.via-primary-300\/0 {
  --tw-gradient-via: rgb(180 198 212 / 0.00) var(--tw-gradient-via-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.via-primary-400 {
  --tw-gradient-via: rgb(138 166 188) var(--tw-gradient-via-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.via-primary-400\/10 {
  --tw-gradient-via: rgb(138 166 188 / 0.10) var(--tw-gradient-via-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.via-primary-400\/30 {
  --tw-gradient-via: rgb(138 166 188 / 0.30) var(--tw-gradient-via-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.via-primary-500 {
  --tw-gradient-via: rgb(88 128 160) var(--tw-gradient-via-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.via-primary-75 {
  --tw-gradient-via: rgb(238 242 246) var(--tw-gradient-via-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.via-secondary {
  --tw-gradient-via: rgb(226 88 112) var(--tw-gradient-via-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.via-secondary\/10 {
  --tw-gradient-via: rgb(226 88 112 / 0.10) var(--tw-gradient-via-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.to-primary-100 {
  --tw-gradient-to: rgb(235 240 244) var(--tw-gradient-to-position) !important;
}

.to-primary-200\/15 {
  --tw-gradient-to: rgb(208 219 228 / 0.15) var(--tw-gradient-to-position) !important;
}

.to-primary-300 {
  --tw-gradient-to: rgb(180 198 212) var(--tw-gradient-to-position) !important;
}

.to-primary-300\/30 {
  --tw-gradient-to: rgb(180 198 212 / 0.30) var(--tw-gradient-to-position) !important;
}

.to-primary-400 {
  --tw-gradient-to: rgb(138 166 188) var(--tw-gradient-to-position) !important;
}

.to-primary-50 {
  --tw-gradient-to: rgb(247 249 250) var(--tw-gradient-to-position) !important;
}

.to-primary-50\/60 {
  --tw-gradient-to: rgb(247 249 250 / 0.60) var(--tw-gradient-to-position) !important;
}

.to-primary-500 {
  --tw-gradient-to: rgb(88 128 160) var(--tw-gradient-to-position) !important;
}

.to-primary-75 {
  --tw-gradient-to: rgb(238 242 246) var(--tw-gradient-to-position) !important;
}

.to-primary-75\/30 {
  --tw-gradient-to: rgb(238 242 246 / 0.30) var(--tw-gradient-to-position) !important;
}

.to-primary-75\/40 {
  --tw-gradient-to: rgb(238 242 246 / 0.40) var(--tw-gradient-to-position) !important;
}

.to-primary-75\/60 {
  --tw-gradient-to: rgb(238 242 246 / 0.60) var(--tw-gradient-to-position) !important;
}

.to-secondary {
  --tw-gradient-to: rgb(226 88 112) var(--tw-gradient-to-position) !important;
}

.to-secondary\/0 {
  --tw-gradient-to: rgb(226 88 112 / 0.00) var(--tw-gradient-to-position) !important;
}

.to-secondary\/5 {
  --tw-gradient-to: rgb(226 88 112 / 0.05) var(--tw-gradient-to-position) !important;
}

.to-secondary\/10 {
  --tw-gradient-to: rgb(226 88 112 / 0.10) var(--tw-gradient-to-position) !important;
}

.to-secondary\/20 {
  --tw-gradient-to: rgb(226 88 112 / 0.20) var(--tw-gradient-to-position) !important;
}

.to-secondary\/30 {
  --tw-gradient-to: rgb(226 88 112 / 0.30) var(--tw-gradient-to-position) !important;
}

.to-secondary-500 {
  --tw-gradient-to: rgb(226 88 112) var(--tw-gradient-to-position) !important;
}

.to-secondary-75\/40 {
  --tw-gradient-to: rgb(252 238 241 / 0.40) var(--tw-gradient-to-position) !important;
}

/* ===== SHADOW / RING COLORS ===== */

.shadow-primary-300\/10 {
  --tw-shadow-color: rgb(180 198 212 / 0.10) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.shadow-primary-300\/20 {
  --tw-shadow-color: rgb(180 198 212 / 0.20) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.shadow-primary-300\/40 {
  --tw-shadow-color: rgb(180 198 212 / 0.40) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.shadow-primary-400\/20 {
  --tw-shadow-color: rgb(138 166 188 / 0.20) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.shadow-primary-400\/30 {
  --tw-shadow-color: rgb(138 166 188 / 0.30) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.shadow-primary-500\/40 {
  --tw-shadow-color: rgb(88 128 160 / 0.40) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.shadow-secondary-300\/10 {
  --tw-shadow-color: rgb(242 180 191 / 0.10) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.shadow-secondary-400\/30 {
  --tw-shadow-color: rgb(235 138 155 / 0.30) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.shadow-secondary\/50 {
  --tw-shadow-color: rgb(226 88 112 / 0.50) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

/* ===== HOVER STATES ===== */

.hover\:bg-primary-50:hover {
  background-color: rgb(247 249 250) !important;
}

.hover\:bg-primary-600:hover {
  background-color: rgb(73 109 136) !important;
}

.hover\:bg-primary-300:hover {
  background-color: rgb(180 198 212) !important;
}

.hover\:border-primary-200:hover {
  border-color: rgb(208 219 228) !important;
}

.hover\:border-primary-300:hover {
  border-color: rgb(180 198 212) !important;
}

.hover\:border-primary-300\/60:hover {
  border-color: rgb(180 198 212 / 0.60) !important;
}

.hover\:text-primary-300:hover {
  color: rgb(180 198 212) !important;
}

.hover\:text-primary-400:hover {
  color: rgb(138 166 188) !important;
}

.hover\:text-primary-500:hover {
  color: rgb(88 128 160) !important;
}

.hover\:text-secondary:hover {
  color: rgb(226 88 112) !important;
}

.hover\:from-primary-400:hover {
  --tw-gradient-from: rgb(138 166 188) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(138 166 188 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.hover\:to-primary-500:hover {
  --tw-gradient-to: rgb(88 128 160) var(--tw-gradient-to-position) !important;
}

.hover\:shadow-primary-300\/25:hover {
  --tw-shadow-color: rgb(180 198 212 / 0.25) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.hover\:shadow-primary-300\/30:hover {
  --tw-shadow-color: rgb(180 198 212 / 0.30) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.hover\:shadow-primary-400\/20:hover {
  --tw-shadow-color: rgb(138 166 188 / 0.20) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.hover\:shadow-primary-400\/30:hover {
  --tw-shadow-color: rgb(138 166 188 / 0.30) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.hover\:shadow-primary-500\/50:hover {
  --tw-shadow-color: rgb(88 128 160 / 0.50) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.hover\:shadow-secondary-400\/20:hover {
  --tw-shadow-color: rgb(235 138 155 / 0.20) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

/* ===== GROUP-HOVER STATES ===== */

.group-hover\:border-primary-300:hover {
  border-color: rgb(180 198 212) !important;
}

.group:hover .group-hover\:border-primary-300 {
  border-color: rgb(180 198 212) !important;
}

.group-hover\:from-primary-400:hover {
  --tw-gradient-from: rgb(138 166 188) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(138 166 188 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.group:hover .group-hover\:from-primary-400 {
  --tw-gradient-from: rgb(138 166 188) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(138 166 188 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.group-hover\:from-primary-500:hover {
  --tw-gradient-from: rgb(88 128 160) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(88 128 160 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.group:hover .group-hover\:from-primary-500 {
  --tw-gradient-from: rgb(88 128 160) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(88 128 160 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.group-hover\:from-primary-400\/5:hover {
  --tw-gradient-from: rgb(138 166 188 / 0.05) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(138 166 188 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.group:hover .group-hover\:from-primary-400\/5 {
  --tw-gradient-from: rgb(138 166 188 / 0.05) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(138 166 188 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.group-hover\:to-primary-400:hover {
  --tw-gradient-to: rgb(138 166 188) var(--tw-gradient-to-position) !important;
}

.group:hover .group-hover\:to-primary-400 {
  --tw-gradient-to: rgb(138 166 188) var(--tw-gradient-to-position) !important;
}

.group-hover\:to-primary-500:hover {
  --tw-gradient-to: rgb(88 128 160) var(--tw-gradient-to-position) !important;
}

.group:hover .group-hover\:to-primary-500 {
  --tw-gradient-to: rgb(88 128 160) var(--tw-gradient-to-position) !important;
}

.group-hover\:to-secondary:hover {
  --tw-gradient-to: rgb(226 88 112) var(--tw-gradient-to-position) !important;
}

.group:hover .group-hover\:to-secondary {
  --tw-gradient-to: rgb(226 88 112) var(--tw-gradient-to-position) !important;
}

.group-hover\:to-secondary\/5:hover {
  --tw-gradient-to: rgb(226 88 112 / 0.05) var(--tw-gradient-to-position) !important;
}

.group:hover .group-hover\:to-secondary\/5 {
  --tw-gradient-to: rgb(226 88 112 / 0.05) var(--tw-gradient-to-position) !important;
}

.group-hover\:via-primary-300\/5:hover {
  --tw-gradient-via: rgb(180 198 212 / 0.05) var(--tw-gradient-via-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.group:hover .group-hover\:via-primary-300\/5 {
  --tw-gradient-via: rgb(180 198 212 / 0.05) var(--tw-gradient-via-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.group-hover\:via-secondary:hover {
  --tw-gradient-via: rgb(226 88 112) var(--tw-gradient-via-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.group:hover .group-hover\:via-secondary {
  --tw-gradient-via: rgb(226 88 112) var(--tw-gradient-via-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.group-hover\:text-primary-500:hover {
  color: rgb(88 128 160) !important;
}

.group:hover .group-hover\:text-primary-500 {
  color: rgb(88 128 160) !important;
}

.group-hover\:text-primary-600:hover {
  color: rgb(73 109 136) !important;
}

.group:hover .group-hover\:text-primary-600 {
  color: rgb(73 109 136) !important;
}

.group-hover\:text-secondary-500:hover {
  color: rgb(226 88 112) !important;
}

.group:hover .group-hover\:text-secondary-500 {
  color: rgb(226 88 112) !important;
}

.group-hover\:shadow-primary-400\/30:hover {
  --tw-shadow-color: rgb(138 166 188 / 0.3) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.group:hover .group-hover\:shadow-primary-400\/30 {
  --tw-shadow-color: rgb(138 166 188 / 0.3) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.group-hover\:shadow-primary-400\/40:hover {
  --tw-shadow-color: rgb(138 166 188 / 0.4) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.group:hover .group-hover\:shadow-primary-400\/40 {
  --tw-shadow-color: rgb(138 166 188 / 0.4) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.group-hover\:shadow-primary-400\/50:hover {
  --tw-shadow-color: rgb(138 166 188 / 0.5) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.group:hover .group-hover\:shadow-primary-400\/50 {
  --tw-shadow-color: rgb(138 166 188 / 0.5) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

/* ===== FOCUS STATES (forms) ===== */

.focus\:border-primary-300:focus {
  --tw-border-opacity: 1;
  border-color: rgb(180 198 212 / var(--tw-border-opacity)) !important;
}

.focus\:border-primary-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(88 128 160 / var(--tw-border-opacity)) !important;
}

.focus-within\:border-primary-500:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(88 128 160 / var(--tw-border-opacity)) !important;
}

.focus\:ring-primary-500:focus {
  --tw-ring-color: rgb(88 128 160 / 1) !important;
}

.focus\:ring-primary-600:focus {
  --tw-ring-color: rgb(73 109 136 / 1) !important;
}

/* ===== MISC (::after pseudo, border-t) ===== */

.after\:bg-primary-300::after {
  --tw-bg-opacity: 1;
  background-color: rgb(180 198 212 / var(--tw-bg-opacity)) !important;
}

.after\:from-primary-300\/40::after {
  --tw-gradient-from: rgb(180 198 212 / 0.40) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(180 198 212 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.border-t-primary-400 {
  --tw-border-opacity: 1;
  border-top-color: rgb(138 166 188 / var(--tw-border-opacity)) !important;
}