/*
 * Design System color overrides — loaded after tailwind.css so these win the cascade.
 * Remapea la escala "indigo" de Tailwind (usada en checkboxes, links, focus rings, etc.)
 * al naranjo de marca (--arcilla), el color de los elementos interactivos.
 * Referencia var(--arcilla-*) en vez de repetir los hex: cambiar el naranjo en
 * application.css alcanza para que esto se actualice solo.
 */
:root {
  --color-indigo-50:  var(--arcilla-100);
  --color-indigo-100: var(--arcilla-100);
  --color-indigo-200: var(--arcilla-100);
  --color-indigo-300: var(--arcilla);
  --color-indigo-400: var(--arcilla);
  --color-indigo-500: var(--arcilla);
  --color-indigo-600: var(--arcilla);
  --color-indigo-700: var(--arcilla-800);
  --color-indigo-800: var(--arcilla-800);
  --color-indigo-900: var(--arcilla-800);
}