/* Klorvia Connect — tema oficial rosa
   Cor principal: #FF4F87
   Hover: #E63D73
   Ativo: #C72D60
*/

:root {
  --w-50: #FFF1F6;
  --w-100: #FFE4EE;
  --w-200: #FFC9DB;
  --w-300: #FFA3C0;
  --w-400: #FF75A1;
  --w-500: #FF4F87;
  --w-600: #E63D73;
  --w-700: #C72D60;
  --w-800: #A52350;
  --w-900: #881F46;
  --w-950: #4D0A23;

  --color-woot-50: #FFF1F6;
  --color-woot-100: #FFE4EE;
  --color-woot-200: #FFC9DB;
  --color-woot-300: #FFA3C0;
  --color-woot-400: #FF75A1;
  --color-woot-500: #FF4F87;
  --color-woot-600: #E63D73;
  --color-woot-700: #C72D60;
  --color-woot-800: #A52350;
  --color-woot-900: #881F46;
  --color-woot-950: #4D0A23;

  --color-n-brand-1: #FFF8FB;
  --color-n-brand-2: #FFF1F6;
  --color-n-brand-3: #FFE4EE;
  --color-n-brand-4: #FFD5E3;
  --color-n-brand-5: #FFC2D5;
  --color-n-brand-6: #FFA3C0;
  --color-n-brand-7: #FF75A1;
  --color-n-brand-8: #FF5C91;
  --color-n-brand-9: #FF4F87;
  --color-n-brand-10: #E63D73;
  --color-n-brand-11: #C72D60;
  --color-n-brand-12: #4D0A23;

  --color-n-brand: #FF4F87;
  --color-n-brand-hover: #E63D73;
  --color-n-brand-pressed: #C72D60;
  --color-n-brand-subtle: #FFF1F6;
}

/* Fundos e botões principais */
.bg-woot-500,
.bg-n-brand,
.bg-n-brand-9 {
  background-color: #FF4F87 !important;
}

.bg-woot-600,
.bg-n-brand-hover,
.bg-n-brand-10 {
  background-color: #E63D73 !important;
}

.hover\:bg-woot-600:hover,
.hover\:bg-n-brand:hover,
.hover\:bg-n-brand-10:hover {
  background-color: #E63D73 !important;
}

.active\:bg-woot-700:active,
.active\:bg-n-brand-11:active {
  background-color: #C72D60 !important;
}

/* Textos e links de marca */
.text-woot-500,
.text-woot-600,
.text-n-brand,
.text-n-brand-9,
.text-n-brand-10 {
  color: #FF4F87 !important;
}

.hover\:text-woot-600:hover,
.hover\:text-n-brand:hover,
.hover\:text-n-brand-10:hover {
  color: #E63D73 !important;
}

/* Bordas, foco, seleção e indicadores */
.border-woot-500,
.border-n-brand,
.border-n-brand-9 {
  border-color: #FF4F87 !important;
}

.ring-woot-500,
.ring-n-brand,
.ring-n-brand-9 {
  --tw-ring-color: #FF4F87 !important;
}

.focus\:ring-woot-500:focus,
.focus\:ring-n-brand:focus,
.focus-visible\:ring-woot-500:focus-visible,
.focus-visible\:ring-n-brand:focus-visible {
  --tw-ring-color: #FF4F87 !important;
}

.outline-woot-500,
.outline-n-brand,
.focus-visible\:outline-woot-500:focus-visible,
.focus-visible\:outline-n-brand:focus-visible {
  outline-color: #FF4F87 !important;
}

.fill-woot-500,
.fill-n-brand {
  fill: #FF4F87 !important;
}

.stroke-woot-500,
.stroke-n-brand {
  stroke: #FF4F87 !important;
}

/* Compatibilidade com alguns componentes legados */
a.text-blue-500,
a.text-blue-600,
button.text-blue-500,
button.text-blue-600 {
  color: #FF4F87 !important;
}

button.bg-blue-500,
button.bg-blue-600,
input[type="submit"].bg-blue-500,
input[type="submit"].bg-blue-600 {
  background-color: #FF4F87 !important;
}

button.bg-blue-500:hover,
button.bg-blue-600:hover,
input[type="submit"].bg-blue-500:hover,
input[type="submit"].bg-blue-600:hover {
  background-color: #E63D73 !important;
}

/* Controles nativos */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: #FF4F87;
}

::selection {
  background: rgba(255, 79, 135, 0.28);
}