:root {
  --brand-50:  #ECFDFF;
  --brand-100: #CFF8FE;
  --brand-200: #A5F0FC;
  --brand-300: #6FE5F8;
  --brand-400: #2FD7F1;
  --brand-500: #00CFEB; /* Azul principal */
  --brand-600: #00B6D1;
  --brand-700: #0092A8;
  --brand-800: #0A7487;
  --brand-900: #0D5B6A;

  --dark: #414042;
}

/* Utilidades similares a Tailwind */
.bg-brand-50  { background-color: var(--brand-50) !important; }
.bg-brand-100 { background-color: var(--brand-100) !important; }
.bg-brand-200 { background-color: var(--brand-200) !important; }
.bg-brand-300 { background-color: var(--brand-300) !important; }
.bg-brand-400 { background-color: var(--brand-400) !important; }
.bg-brand-500 { background-color: var(--brand-500) !important; }
.bg-brand-600 { background-color: var(--brand-600) !important; }
.bg-brand-700 { background-color: var(--brand-700) !important; }
.bg-brand-800 { background-color: var(--brand-800) !important; }
.bg-brand-900 { background-color: var(--brand-900) !important; }

.text-brand-50  { color: var(--brand-50) !important; }
.text-brand-100 { color: var(--brand-100) !important; }
.text-brand-200 { color: var(--brand-200) !important; }
.text-brand-300 { color: var(--brand-300) !important; }
.text-brand-400 { color: var(--brand-400) !important; }
.text-brand-500 { color: var(--brand-500) !important; }
.text-brand-600 { color: var(--brand-600) !important; }
.text-brand-700 { color: var(--brand-700) !important; }
.text-brand-800 { color: var(--brand-800) !important; }
.text-brand-900 { color: var(--brand-900) !important; }

.border-brand-500 { border-color: var(--brand-500) !important; }

/* Compatibility helpers for CTA and brand usage */
.bg-brand { background-color: var(--brand-500) !important; }
.bg-brand-light { background-color: var(--brand-300) !important; }
.text-brand { color: var(--brand-500) !important; }
.text-brand-light { color: var(--brand-300) !important; }
.border-brand { border-color: var(--brand-500) !important; }

/* Ensure a subtle focus ring fallback when Tailwind ring utilities reference 'brand' */
.focus-ring-brand:focus { box-shadow: 0 0 0 3px rgba(0,207,235,0.18); }