:root{
  --azul-900: #002B5C;
  --azul-800: color-mix(in srgb, #002B5C 85%, #fff 15%);
  --azul-700: color-mix(in srgb, #002B5C 70%, #fff 30%);
  --azul-600: color-mix(in srgb, #002B5C 65%, #fff 35%);
  --azul-500: color-mix(in srgb, #002B5C 40%, #fff 60%);
  --azul-100: color-mix(in srgb, #002B5C 15%, #fff 85%);
  --azul-50:  color-mix(in srgb, #002B5C 7%, #fff 93%);

  --secundario-900: #64748B;
  --secundario-700: color-mix(in srgb, #64748B 80%, #fff 20%);
  --secundario-500: color-mix(in srgb, #64748B 55%, #fff 45%);
  --secundario-100: color-mix(in srgb, #64748B 12%, #fff 88%);

  --terciario-900: #005EB8;
  --terciario-700: color-mix(in srgb, #005EB8 80%, #fff 20%);
  --terciario-500: color-mix(in srgb, #005EB8 55%, #fff 45%);
  --terciario-100: color-mix(in srgb, #005EB8 12%, #fff 88%);

  /* Acento de marca para texto/bordes sobre fondo oscuro (sidebar en
     modo oscuro, etc.) — separado de --azul-900 porque ese puede ser
     un color muy oscuro que ahí se perdería por falta de contraste. */
  --azul-acento-oscuro: #4DA3FF;
}