body.theme-suite,
body.theme-contact {
  --brand-50: #f2f6fd;
  --brand-100: #eaf2ff;
  --brand-200: #cdddf8;
  --brand-300: #a9c2ee;
  --brand-400: #6f97d8;
  --brand-500: #2b63c0;
  --brand-600: #1e5bb8;
  --brand-700: #174a96;
  --brand-800: #1b3d74;
  --brand-900: #1d345d;
  --brand-950: #14233d;
  --brand-rgb: 30, 91, 184;
  --brand-soft-rgb: 111, 151, 216;
  --brand-deep-rgb: 29, 52, 93;
  --brand-dark-rgb: 20, 35, 61;
}

body.theme-flow {
  --brand-50: #effcff;
  --brand-100: #cffafe;
  --brand-200: #a5f3fc;
  --brand-300: #67e8f9;
  --brand-400: #22d3ee;
  --brand-500: #06b6d4;
  --brand-600: #0891b2;
  --brand-700: #0e7490;
  --brand-800: #155e75;
  --brand-900: #164e63;
  --brand-950: #083344;
  --brand-rgb: 8, 145, 178;
  --brand-soft-rgb: 34, 211, 238;
  --brand-deep-rgb: 22, 78, 99;
  --brand-dark-rgb: 8, 51, 68;
}

body.theme-manage {
  --brand-50: #f2f6fd;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;
  --brand-500: #2b63c0;
  --brand-600: #1e5bb8;
  --brand-700: #174a96;
  --brand-800: #1b3d74;
  --brand-900: #1d345d;
  --brand-950: #14233d;
  --brand-rgb: 30, 91, 184;
  --brand-soft-rgb: 96, 165, 250;
  --brand-deep-rgb: 29, 52, 93;
  --brand-dark-rgb: 20, 35, 61;
}

body.theme-crm {
  --brand-50: #eef4ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;
  --brand-500: #1e40af;
  --brand-600: #1e3a8a;
  --brand-700: #1d3480;
  --brand-800: #1e316b;
  --brand-900: #172554;
  --brand-950: #0f172a;
  --brand-rgb: 30, 58, 138;
  --brand-soft-rgb: 96, 165, 250;
  --brand-deep-rgb: 23, 37, 84;
  --brand-dark-rgb: 15, 23, 42;
}

body.theme-suite,
body.theme-contact,
body.theme-flow,
body.theme-manage,
body.theme-crm {
  --color-emerald-50: var(--brand-50);
  --color-emerald-100: var(--brand-100);
  --color-emerald-200: var(--brand-200);
  --color-emerald-300: var(--brand-300);
  --color-emerald-400: var(--brand-400);
  --color-emerald-500: var(--brand-500);
  --color-emerald-600: var(--brand-600);
  --color-emerald-700: var(--brand-700);
  --color-emerald-800: var(--brand-800);
  --color-emerald-900: var(--brand-900);
  --color-emerald-950: var(--brand-950);
}

.border-emerald-500\/20 {
  border-color: rgba(var(--brand-rgb), 0.2);
}

.bg-emerald-500\/10 {
  background-color: rgba(var(--brand-rgb), 0.1);
}

.bg-emerald-500\/15 {
  background-color: rgba(var(--brand-rgb), 0.15);
}

.bg-emerald-500\/20 {
  background-color: rgba(var(--brand-rgb), 0.2);
}

.bg-emerald-800\/50 {
  background-color: rgba(var(--brand-deep-rgb), 0.5);
}

.text-emerald-100\/80 {
  color: color-mix(in srgb, var(--brand-100) 80%, transparent);
}

.text-emerald-300\/70 {
  color: color-mix(in srgb, var(--brand-300) 70%, transparent);
}

.text-emerald-300\/80 {
  color: color-mix(in srgb, var(--brand-300) 80%, transparent);
}

.text-emerald-400\/80 {
  color: color-mix(in srgb, var(--brand-400) 80%, transparent);
}

.bg-\[radial-gradient\(circle_at_top_right\,_rgba\(16\,185\,129\,0\.14\)\,_transparent_28\%\)\,radial-gradient\(circle_at_bottom_left\,_rgba\(34\,197\,94\,0\.10\)\,_transparent_24\%\)\] {
  background-image:
    radial-gradient(circle at 100% 0, rgba(var(--brand-rgb), 0.12), transparent 28%),
    radial-gradient(circle at 0 100%, rgba(var(--brand-soft-rgb), 0.1), transparent 24%);
}

.shadow-\[0_0_18px_rgba\(52\,211\,153\,0\.9\)\] {
  box-shadow: 0 0 18px rgba(var(--brand-soft-rgb), 0.85);
}

.shadow-emerald-600\/20 {
  --tw-shadow-color: rgba(var(--brand-rgb), 0.2);
}

.shadow-emerald-600\/30 {
  --tw-shadow-color: rgba(var(--brand-rgb), 0.3);
}

.shadow-emerald-900\/20 {
  --tw-shadow-color: rgba(var(--brand-deep-rgb), 0.2);
}

.shadow-emerald-950\/30 {
  --tw-shadow-color: rgba(var(--brand-dark-rgb), 0.3);
}

.from-emerald-100\/40 {
  --tw-gradient-from: color-mix(in srgb, var(--brand-100) 40%, transparent);
}

@media (hover: hover) {
  .hover\:border-emerald-500\/50:hover {
    border-color: rgba(var(--brand-rgb), 0.5);
  }

  .hover\:bg-emerald-800\/80:hover {
    background-color: rgba(var(--brand-deep-rgb), 0.8);
  }
}

.floating-whatsapp {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 18px 40px rgba(5, 150, 105, 0.28) !important;
}

.floating-whatsapp:hover {
  box-shadow: 0 22px 44px rgba(5, 150, 105, 0.34) !important;
}