/* ============================================================
   RADAR Canarias — Brand CSS
   Cargar DESPUÉS de tailwind.css en base.html
   ============================================================ */

/* --- Custom Properties ------------------------------------ */
:root {
  --color-primary:      #0A3D62;
  --color-primary-dark: #082d4a;
  --color-accent:       #FF7F50;
  --color-accent-dark:  #e86e3f;
  --color-white:        #ffffff;
}

/* --- Tipografía ------------------------------------------- */
body {
  font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4 {
  font-family: 'Inter', sans-serif;
}
.font-brand {
  font-family: 'Inter', sans-serif;
}

/* --- Background ------------------------------------------- */
.bg-brand {
  background-color: var(--color-primary);
}
.bg-accent {
  background-color: var(--color-accent);
}
.hover\:bg-brand:hover {
  background-color: var(--color-primary);
}
.hover\:bg-brand-dark:hover {
  background-color: var(--color-primary-dark);
}
.hover\:bg-accent-dark:hover {
  background-color: var(--color-accent-dark);
}

/* --- Text ------------------------------------------------- */
.text-brand {
  color: var(--color-primary);
}
.text-accent {
  color: var(--color-accent);
}
.hover\:text-brand:hover {
  color: var(--color-primary);
}
.hover\:text-accent:hover {
  color: var(--color-accent);
}

/* --- Border / Ring ---------------------------------------- */
.border-brand {
  border-color: var(--color-primary);
}
.ring-brand {
  --tw-ring-color: var(--color-primary);
}

/* --- Botones ---------------------------------------------- */
.btn-brand {
  background-color: var(--color-primary);
  color: var(--color-white);
  transition: background-color 0.15s;
}
.btn-brand:hover {
  background-color: var(--color-primary-dark);
}
.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-white);
  transition: background-color 0.15s;
}
.btn-accent:hover {
  background-color: var(--color-accent-dark);
}

/* --- Overrides de clases indigo usadas en templates ------- */
/* focus:ring-2 + focus:ring-brand actúa sobre inputs */
.focus\:ring-brand:focus {
  --tw-ring-color: var(--color-primary);
}

/* badge / chip de categoría */
.bg-brand-50 {
  background-color: #e8f0f8;
}
.text-brand-700 {
  color: #0A3D62;
}
.border-brand-100 {
  border-color: #c2d5e8;
}
.border-brand-200 {
  border-color: #9bbbd7;
}